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

Question

在我的应用程序 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();
  }

使用此代码我有一个列表，可以让我看到名称并通过 'routes' 将我转到另一个页面。

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

当我开始输入时 'M' 我会看到一个列表马丁迈克.

有什么建议吗？

谢谢

Answer 1

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

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

allNames 变量包含所有名称。

searchedNames 变量包含所有名称。

_searchChanged 函数 setStates with searchedName 基于在 TextField

中输入的测试

// Widget for searching through a string list.
class SearchNameWidget extends StatefulWidget {
  SearchNameWidget({Key key}) : super(key: key);

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

class _SearchNameState extends State<SearchNameWidget> {
  // All names
  List<String> allNames = [
    'one',
    'two',
    'three',
    'four',
    'five',
    'six',
    'seven',
    'eight',
    'nine',
    'ten'
  ];

  // searched names
  List<String> searchedNames = [
    'one',
    'two',
    'three',
    'four',
    'five',
    'six',
    'seven',
    'eight',
    'nine',
    'ten'
  ];

  // changes the filtered name based on search text and sets state.
  void _searchChanged(String searchText) {
    if (searchText != null && searchText.isNotEmpty) {
      setState(() {
        searchedNames =
            List.from(allNames.where((name) => name.contains(searchText)));
      });
    }
    else {
      setState(() {
        searchedNames =
            List.from(allNames);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demos'),
      ),
      body: Column(
        children: [
          TextField(
            // calls the _searchChanged on textChange
            onChanged: (search) => _searchChanged(search),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: searchedNames.length,
              itemBuilder: (context, index) => Container(
                padding: EdgeInsets.all(5),
                child: Text(searchedNames[index]),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

how do i add a search bar for a listview.Builder with a json file?

json

searchbar

flutter