Flutter 使用 ListView.builder 和 SearchDelegate 展示并搜索字符串列表

以下是一个简单的示例代码，演示如何使用 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 用作其数据源来呈现过滤后的结果。