我如何为带有 json 文件的 listview.Builder 添加搜索栏？

如何解决我如何为带有 json 文件的 listview.Builder 添加搜索栏？

在我的应用程序 Flutter 中，我有一个带有这个主体的小部件

body: ListView.builder(
        itemCount: data.length,itemBuilder: (BuildContext context,int index) {
          return Column(
            children: <Widget>[
              ListTile(
                title: Text(data[index]['name']),leading: Icon(Icons.arrow_forward_ios),onTap: () => {
                  Navigator.pushNamed(context,data[index]['routes'])
                  // Your Logout method
                },//title: Text(data[index]['name']),)
            ],);
        },),

变量数据依赖于本地 json 文件。 json文件是这样的：

[
    {
        "name" : "name","routes" : "/routes1"
    },{
        "name" : "name2","routes" :  "/routes2"
    },]

对于更新 json 文件，我使用此代码

Future<String> loadJsonData() async {
    var jsonText =
        await rootBundle.loadString('assets/file.json');
    setState(() {
      data = json.decode(jsonText);
    });
    print(jsonText);
  }

  @override
  // ignore: must_call_super
  void initState() {
    this.loadJsonData();
  }

使用此代码，我有一个列表，可以让我看到名称并通过“路由”将我发送到另一个页面。

我需要添加一个搜索栏，它允许我在键入名称时仅显示相似的名称。例如，如果 json 文件中的列表名称是：马丁麦克风詹姆斯

当我开始输入“M”时，我会看到一个列表马丁迈克。

有什么建议吗？

谢谢

解决方法

因为列表是本地的，不会改变。可以使用一个简单的有状态小部件来实现搜索。

最简单的方法是在状态中为过滤器名称添加一个变量，并根据搜索文本使用过滤器名称设置状态。这里我使用了一个字符串项，请使用适合您需要的类。

allNames 变量包含所有名称。

searchedNames 函数 setState 和 searchedName 基于在 _searchChanged 中输入的测试

TextField

我如何为带有 json 文件的 listview.Builder 添加搜索栏？

如何解决我如何为带有 json 文件的 listview.Builder 添加搜索栏？

解决方法

相关推荐