Flutter 我想在搜索后显示数据

Question

listview美好的一天，您是否知道如何制作一个搜索栏，当没有人搜索我的数据来自 mysql 时，该搜索栏不首先显示列表视图 抱歉，新的 flutter

 @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('New Transaction'),
              backgroundColor: Color(0xff083663),
            ),
            body: RefreshIndicator(
              onRefresh: fetchNotes,
              key: _refresh,
              child: loading
                  ? Center(
                      child: CircularProgressIndicator(),
                    )
                  : ListView.builder(
                      itemBuilder: (context, i) {
                        return i == 0 ? _searchBar() : _listItem(i - 1);
                      },
                      itemCount: _notesForDisplay.length + 1,
                    ),
            ));
      }

这是我的搜索栏，用户将在其中输入他/她的搜索

 _searchBar() {
    return Container(
      padding: const EdgeInsets.all(10.0),
      child: Card(
        child: ListTile(
          leading: Icon(Icons.search),
          title: TextField(
            decoration:
                InputDecoration(hintText: "Search", border: InputBorder.none),
            onChanged: (text) {
              text = text.toLowerCase();
              setState(() {
                _notesForDisplay = _notes.where((note) {
                  var noTitle = note.vesselname.toLowerCase();
                  return noTitle.contains(text);
                }).toList();
              });
            },
          ),
        ),
      ),
    );
  }

这是我搜索的列表视图，我希望在用户在搜索栏中输入值后显示

  _listItem(i) {
    final x = _notesForDisplay[i];
    return Container(
      padding: EdgeInsets.all(20.0),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Vessel Name:\t' + x.vesselname,
                  style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
                ),
                Text('Voyage #:\t' + x.voyageno,
                    style: TextStyle(fontSize: 18.0)),
                Text('Ship Call #:\t' + x.scn,
                    style: TextStyle(fontSize: 18.0)),
                Divider()
              ],
            ),
          ),
          IconButton(
              icon: Icon(
                Icons.add_circle_outline,
                size: 30.0,
              ),
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => Transaction(x)));
              }),
        ],
      ),
    );
  }
}

Answer 1

定义一个bool变量，指示列表视图的可见性状态：

bool _isListViewVisible = false;

将其添加到setState代码块中：

setState(() {
     _isListViewVisible = true; //Or you can check the text length 
     _notesForDisplay = _notes.where((note) {
     var noTitle = note.vesselname.toLowerCase();
     return noTitle.contains(text);
       }).toList();
  });

然后将列表放在可见性小部件中：

return Visibility(
   visible: _isListViewVisible,
     child: Container(
       padding: EdgeInsets.all(20.0),
         child: Row(
         children: <Widget>[
            ....
    ],
  ),
));