flutter加载一个list<string,string>，然后呈现在屏幕上，使用listbuilder，然后带上一个搜索框

以下是一个简单的示例代码，演示如何使用Flutter的ListView和SearchDelegate来展示并搜索一个列表中的字符串对：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'String List Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<Map<String, String>> _stringList = [
    {"name": "Alice", "age": "25"},
    {"name": "Bob", "age": "30"},
    {"name": "Charlie", "age": "35"},
    {"name": "David", "age": "40"},
    {"name": "Eve", "age": "45"},
  ];

  List<Map<String, String>> _filteredStringList = [];

  @override
  void initState() {
    super.initState();
    _filteredStringList = List.from(_stringList);
  }

  void _filterList(String searchText) {
    setState(() {
      _filteredStringList = _stringList
          .where((string) =>
              string["name"].toLowerCase().contains(searchText.toLowerCase()))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () async {
              String result = await showSearch(
                context: context,
                delegate: StringSearchDelegate(_filterList),
              );
              print(result);
            },
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: _filteredStringList.length,
        itemBuilder: (BuildContext context, int index) {
          String name = _filteredStringList[index]["name"];
          String age = _filteredStringList[index]["age"];
          return ListTile(
            title: Text(name),
            subtitle: Text("Age: $age"),
          );
        },
      ),
    );
  }
}

class StringSearchDelegate extends SearchDelegate<String> {
  final Function(String) onFilter;

  StringSearchDelegate(this.onFilter);

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = "";
          onFilter(query);
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, "");
      },
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    return Container();
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return ListView.builder(
      itemCount: onFilter(query).length,
      itemBuilder: (BuildContext context, int index) {
        String name = onFilter(query)[index]["name"];
        return ListTile(
          title: Text(name),
          onTap: () {
            query = name;
            close(context, name);
          },
        );
      },
    );
  }

  @override
  ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context);
  }
}

上面的代码使用ListView.builder和ListTile来展示字符串列表中的每个字符串对。它还使用了一个SearchDelegate来实现搜索功能。当用户点击搜索按钮时，它会打开一个搜索框，用户可以在其中输入搜索文本并搜索字符串列表。搜索文本会被传递给一个回调函数_onFilter，该函数将过滤字符串列表并更新_filteredStringList。最后，ListView.builder将_filteredStringList用作其数据源来呈现过滤后的结果。