Flutter - FutureBuilder - 搜索

Question

我正在为用户列表使用 FuturBuilder。我通过 futur: fetchpost() 通过 API 获取用户。在专栏的开头，我实现了一个搜索栏。那么我该如何实现我的搜索栏正在搜索呢？

Container(
        child: FutureBuilder(
          future: fetchPost(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if(snapshot.connectionState == ConnectionState.waiting) {
              return Container(
                child: ...CircularPro..(),
                ),

            } else {
              return Container(
                child: Column(
                  children: <Widget>[
                    Padding(
                      child: TextField(
                        onChanged: (value) {

                        },
                        controller: searchController,
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.search),
                        ),

                      ),
                    ),
                    Expanded(
                      child: ListView.builder(
                        itemCount: snapshot.data.length,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(  
                            title: Text(
                              "[" + 
                              snapshot.data[index].id + "] " + 
                              snapshot.data[index].firstname + " " +
                              snapshot.data[index].lastname
                            ),
                            subtitle: Text(snapshot.data[index].email),

Answer 1

您需要为 ListView 上的条件获取一些变量，并在搜索栏的提交事件上设置该变量的值，然后在小部件的 setState() 上设置该变量的值。

String searchString = "";

---

TextField(
                        onChanged: (value) {
                          setState((){
                             searchString = value; 
                          });

                        },
                        controller: searchController,
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.search),
                        ),

                      ),

---

 ListView.builder(
                        itemCount: snapshot.data.length,
                        itemBuilder: (BuildContext context, int index) {
                          return snapshot.data[index].firstname.contains(searchString)? ListTile(  
                            title: Text(
                              "[" + 
                              snapshot.data[index].id + "] " + 
                              snapshot.data[index].firstname + " " +
                              snapshot.data[index].lastname
                            ),
                            subtitle: Text(snapshot.data[index].email),
...

:Container(),