搜索詞未從 TextField 更新到 Firestore StreamBuilder 調用

Question

我正在嘗試實現一個地方，讓我的應用中的用戶可以搜索我的 Firestore 數據庫。

當用戶在文本字段中輸入搜索詞時：

return Scaffold(
      appBar: AppBar(
        title: TextField(
          textInputAction: TextInputAction.search,
          onSubmitted: (value) {
            setState(() {
              searchKey = value;
              streamQuery = db
                  .collection('GearLockerItems')
                  .where('searchTerm', isGreaterThanOrEqualTo: searchKey)
                  .where('searchTerm', isLessThan: '${searchKey}z')
                  .snapshots();
            });
          },
          decoration: const InputDecoration(
            hintText: 'Search for Gear',
            prefixIcon: Icon(Icons.search),
          ),
        ),
      )

我取搜索詞的值並將其放入streamQuery

然后我將那個 streamQuery 放入 StreamBuilder 中：

body: StreamBuilder<dynamic>(
        stream: streamQuery,
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          //widget build for complated call
          print('Inside stream $searchKey');

          if (snapshot.hasData) {
            return ListView.builder(

如您所見，我在其中放置了一個打印語句進行測試，並且在 Stream $searchKey內部一直顯示 null，這是我的默認設置。 我不明白為什么當我在搜索框中輸入數據時，它沒有將searchKey更新為我輸入的內容，而是將其保留為 null ...

Answer 1

首先從 firestore 獲取數據並使用 function 設置 state。它可以工作並且不要忘記使用 await 因為你等到數據被獲取。

Answer 2

return Scaffold(
  appBar: AppBar(
    title: TextField(
      textInputAction: TextInputAction.search,
      onSubmitted: (value) {
          searchKey = value;
          await db
              .collection('GearLockerItems')
              .where('searchTerm', isGreaterThanOrEqualTo: searchKey)
              .where('searchTerm', isLessThan: '${searchKey}z')
              .snapshots().then((data) { setstate((){streamQuery = data; });});
      },
      decoration: const InputDecoration(
        hintText: 'Search for Gear',
        prefixIcon: Icon(Icons.search),
      ),
    ),
  )