Question

我有一个像这样在 FutureBuilder 中使用的列表

Expanded(
  child: Container(
    height: Height * 0.5,
    child: FutureBuilder(
        future: getCustomerList(),
        builder: (context, snapshot) {
          getTake();
          if (snapshot.hasData) {
            list = snapshot.data;
            return SingleChildScrollView(
              child: Column(
                children: [
                  GestureDetector(
                    onTap:(){
                      print(list);
                      print(list.length);
                      var check = list.where((i) => i['give'] > 1).toList();
                      print('list check');
                      print(check);
                      print(check.length);
                      setState(() {
                        list = check;
                      });

                    },
                    child: Container(
                      width: Width * 0.45,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        color: Color(0xfffdeced),
                      ),
                      child: Text('filter'),
                    ),
                  ),

                  Container(
                    height: Height * 0.5,
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: list.length,
                      itemBuilder:
                          (BuildContext context,
                          int index) {
                        return list[index]

                        ['customerName']
                            .toString()
                            .contains(searchString)
                            ? GestureDetector(
                          onTap: () {
                            Navigator.push(
                              context,

                              MaterialPageRoute(
                                  builder: (context) =>
                                      CustomerData(
                                          data: list[index])),
                            );
                          },
                          child: Padding(
                            padding:
                            const EdgeInsets
                                .only(
                                left: 13,
                                right: 13),
                            child: Container(
                              decoration:
                              BoxDecoration(
                                border: Border(
                                    top: BorderSide(
                                        color: Colors
                                            .grey,
                                        width:
                                        .5)),
                              ),
                              child: Padding(
                                padding:
                                const EdgeInsets
                                    .all(
                                    13.0),
                                child: Row(
                                  mainAxisAlignment:
                                  MainAxisAlignment
                                      .spaceBetween,
                                  children: [
                                    Row(
                                      children: [
                                        CircleAvatar(
                                          child:
                                          Text(
                                            list[index]['customerName'][0]
                                                .toString(),
                                            style:
                                            TextStyle(fontFamily: 'PoppinsBold'),
                                          ),
                                          backgroundColor:
                                          Color(0xffF7F9F9),
                                        ),
                                        SizedBox(
                                          width:
                                          20,
                                        ),
                                        Text(
                                          list[index]['customerName']
                                              .toString(),
                                          style: TextStyle(
                                              fontFamily:
                                              'PoppinsMedium'),
                                        ),
                                      ],
                                    ),
                                    Text(
                                      '${list[index]['give'] - list[index]['take']}',
                                      style: TextStyle(
                                          fontFamily:
                                          'PoppinsMedium',
                                      color: list[index]['give'] - list[index]['take'] < 0 ? Colors.red : Colors.green),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        )
                            : Container();
                      },
                    ),
                  )
                ],
              ),
            );
          }
          else
            return Center(
              heightFactor: 1,
              widthFactor: 1,
              child: SizedBox(
                height: 70,
                width: 70,
                child: CircularProgressIndicator(
                  strokeWidth: 2.5,
                ),
              ),
            );
        }),
  ),
),

您可以在手势检测器上看到我正在过滤列表，但它的工作位置和工作状态也没有改变。

正如你所看到的，我正在打印 list.length 它的显示 2 之后在哪里我可以看到它的显示长度 1 这意味着它工作得很好。但是怎么可能改变它的状态呢？

Answer 1

当您使用 SetState 时，您实际上会再次调用您的 FutureBuilder。所以你首先从 snapshot.data 设置列表并显示它们。然后您的手势检测器过滤您的列表并调用 setState。 setState 再次调用 FutureBuilder 将列表设置为 snapshot.data。如果在 list = snapshot.data 后添加一些打印，例如

list = snapshot.data;
print('suprise');
print(list);

你会看到发生了什么。

解决办法是设置一些过滤器，不是对列表，而是对snapshot.data。因此，您必须添加一些新变量，其中包含有关如何过滤数据的信息，高于 FutureBuilder 并将其设置为 setstate。并使用该变量在 getCustomerList 中构建 snapshot.data

未来构建器中的颤振过滤器数据列表

1 个答案: