Flutter异步搜索下拉插件async_searchable_dropdown的使用

当然，下面是一个关于如何使用 async_searchable_dropdown Flutter 插件的示例代码。这个插件允许你在 Flutter 应用中实现异步搜索下拉列表功能。

首先，确保你已经在 pubspec.yaml 文件中添加了 async_searchable_dropdown 依赖：

dependencies:
  flutter:
    sdk: flutter
  async_searchable_dropdown: ^x.y.z  # 替换成最新版本号

然后运行 flutter pub get 来安装依赖。

下面是一个完整的 Flutter 应用示例，展示了如何使用 async_searchable_dropdown：

import 'package:flutter/material.dart';
import 'package:async_searchable_dropdown/async_searchable_dropdown.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Async Searchable Dropdown Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 模拟异步数据加载
  Future<List<String>> fetchData(String query) async {
    // 模拟延迟
    await Future.delayed(Duration(seconds: 1));

    // 假设我们有一个列表，根据查询过滤结果
    List<String> items = [
      'Apple',
      'Banana',
      'Orange',
      'Pineapple',
      'Grapes',
      'Mango',
      'Strawberry',
      'Blueberry',
      'Watermelon',
      'Peach'
    ];

    return items.where((item) => item.toLowerCase().contains(query.toLowerCase())).toList();
  }

  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Async Searchable Dropdown Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            AsyncSearchableDropdown<String>(
              displayClearIcon: true,
              clearIcon: Icon(Icons.clear),
              searchHint: 'Search fruits...',
              label: 'Select a fruit',
              onSearch: fetchData,
              onSelected: (value) {
                setState(() {
                  selectedValue = value;
                });
              },
              onClear: () {
                setState(() {
                  selectedValue = null;
                });
              },
              itemBuilder: (item) {
                return ListTile(
                  leading: Icon(Icons.fruit_dish),
                  title: Text(item),
                );
              },
              noItemsFoundBuilder: () {
                return ListTile(
                  leading: Icon(Icons.error),
                  title: Text('No items found'),
                );
              },
            ),
            SizedBox(height: 20),
            Text('Selected Value: ${selectedValue ?? 'None'}'),
          ],
        ),
      ),
    );
  }
}

代码解释：

1. 依赖安装：在 pubspec.yaml 文件中添加 async_searchable_dropdown 依赖。

2. 主应用：MyApp 类是应用的入口，它包含一个 MaterialApp，其中定义了应用的主题和主页。

3. 主页：MyHomePage 是一个有状态组件，包含异步搜索下拉列表的逻辑。

4. 数据加载：fetchData 函数模拟了一个异步数据加载过程，它接受一个查询字符串并返回一个过滤后的列表。

5. 下拉列表：AsyncSearchableDropdown 组件用于显示下拉列表。

   • displayClearIcon：显示清除图标。
   • clearIcon：自定义清除图标。
   • searchHint：搜索提示文本。
   • label：下拉列表标签。
   • onSearch：当用户在搜索框中输入文本时调用的函数。
   • onSelected：当用户选择一个项目时调用的函数。
   • onClear：当用户点击清除图标时调用的函数。
   • itemBuilder：自定义每个列表项的构建方式。
   • noItemsFoundBuilder：当没有找到匹配项时显示的组件。

6. 显示选中的值：在 AsyncSearchableDropdown 下方，有一个 Text 组件显示选中的值。

希望这个示例能帮助你理解如何使用 async_searchable_dropdown 插件。如果有任何问题或需要进一步的帮助，请随时告诉我！