在 Flutter 中使用 FutureBuilder 进行 ListView 过滤器搜索

Question

我是颤振编程的初学者。当我使用未来的构建器时，我遇到了 listview 搜索功能的问题，当我输入一个字母时，它会更改列表一秒钟，但一秒钟后返回所有列表数据。我不知道错误是什么，因为只有没有警告或错误。我在这个代码上堆栈，请帮助pppppppppppppppp......

这是我的代码， 当我输入字母时的默认列表数据 ，列表会在几秒钟后再次返回

List mydata;
  List unfilterData;

  Future loadJsonData() async {
    List data = json.decode(await rootBundle.loadString('Json/indomodel.json'));
    setState(() {
      mydata = data;
      this.unfilterData = mydata;
    });
    return data;
  }

  Widget mylist() {
    return FutureBuilder(
      future: loadJsonData(),
      builder: (context, snapshot) {
        if (!snapshot.hasData)
          return Center(
              child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation(Colors.amber),
          ));
        else {
          return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (BuildContext context, index) {
              return Card(
                elevation: 0.3,
                child: ListTile(
                  // leading: CircleAvatar(child: Icon(FontAwesomeIcons.adjust),),
                  title: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          SelectableText(
                            mydata[index]['word'],
                            // data[index]['word'],
                            style: TextStyle(
                                fontSize: 16.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.deepPurple.shade800),
                          ),
                          Text(
                            "My Kamus",
                            style: TextStyle(color: Colors.grey, fontSize: 10),
                          )
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Text(
                        mydata[index]['trans'],
                        style: TextStyle(
                            color: Colors.grey.shade700, fontSize: 13.0),
                      )
                    ],
                  ),
                ),
              );
            },
          );
        }
      },
    );
  }

  searchData(str) {
    var strExist = str.length > 0 ? true : false;

    if (strExist) {
      var filterData = [];

      for (var i = 0; i < unfilterData.length; i++) {
        String word = unfilterData[i]['word'];
        if (word.contains(str)) {
          filterData.add(unfilterData[i]);
        }
      }

      setState(() {
        this.mydata = filterData;
      });
    } else {
      setState(() {
        //
        this.mydata = this.unfilterData;
      });
    }
  }

Answer 1

在你的代码的问题是，您呼叫loadJsonData()的FutureBuilder，所以当你打电话setState()的loadJsonData()将被再次调用。

您应该做的是在 中调用loadJsonData()一次，initState()将未来保存到变量中并在 上使用该变量FutureBuilder，如下所示：

Future _future;

@override
void initState() {
  super.initState();
  _future = loadJsonData();
}

并在FutureBuilder这样做：

future: _future,

注意：由于您需要过滤列表，因此可以将列表保存到mydata并mydata在 中使用ListView.builder()，只需确保更改此部分以避免混淆：

itemCount: snapshot.data.length,

应该：

itemCount: mydata.length,

建议：

• 为Futureand指定正确的类型是一个很好的做法，List 因此您可以在没有警告的情况下访问属性，在您的情况下是这样的：Future<List<Map<String, dynamic>>> and List<Map<String, dynamic>>。
• setState()从未来调用是不好的，因为小部件可能会被处理并导致错误，您可以在 FutureBuilder.