时间戳

首页 > 解决方案 > Listview 不使用 TextField 动态更新

flutter - Listview 不使用 TextField 动态更新

问题描述

目前我正在尝试使用 TextField 更新 ListView，但遇到了问题。ListView 最初在初始化时会正确更新，但是当我输入内容时，它会变为空白。

这是我的代码：

class TabbarViewWidget extends StatefulWidget {
  TabbarViewWidget({this.selectedList});

  final List<String> selectedList;

  @override
  _TabbarViewWidgetState createState() => _TabbarViewWidgetState();
}

class _TabbarViewWidgetState extends State<TabbarViewWidget> {
  TextEditingController textController = TextEditingController();

  var items = List<String>();

  void filteredSearch(String query) {
    List<String> dummySearchList = List();
    dummySearchList.addAll(widget.selectedList);
    if (query.isNotEmpty) {
      List<String> dummyListData = List();
      dummySearchList.forEach((item) {
        if (item.contains(query)) {
          dummyListData.add(query);
        }
      });
      setState(() {
        items.clear();
        items.addAll(dummyListData);
      });
      return;
    } else {
      setState(() {
        items.clear();
        items.addAll(widget.selectedList);
      });
    }
  }

  @override
  void initState() {
    items = widget.selectedList;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(15.0),
          child: TextField(
            onChanged: (value) {
              filteredSearch(value.toUpperCase());
            },
            controller: textController,
            decoration: InputDecoration(
                hintText: "Search",
                labelText: "Search",
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                  Radius.circular(25.0),
                ))),
          ),
        ),
        Expanded(
            child: ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('${items[index]}'),
                  );
                })),
      ],
    );
  }
}

需要很多帮助！我是一个自学成才的 Flutter 爱好者，所以我可能不知道很多东西。请多多包涵！

标签： fluttermobiledart

解决方案

不知何故（我没有挖掘原因）您在 widget.selectedList 中的列表在方法中被清除了filteredSearch。

我稍微更改了您的代码，它可以工作：

List items = List<String>();

  void filteredSearch(String query) {
    items = widget.selectedList.where((txt) => query.isEmpty || txt.contains(query)).toList();
    setState(() {
    });
  }

  @override
  void initState() {
    items = widget.selectedList;
    super.initState();
  }

推荐阅读