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>[
            ....
    ],
  ),
));