Flutter搜索栏插件standard_searchbar_v2的使用

当然，以下是如何在Flutter项目中使用standard_searchbar_v2插件的一个简单示例。首先，确保你已经在pubspec.yaml文件中添加了该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  standard_searchbar_v2: ^最新版本号  # 请替换为实际最新版本号

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

接下来，是一个如何在Flutter应用中使用standard_searchbar_v2的示例代码：

import 'package:flutter/material.dart';
import 'package:standard_searchbar_v2/standard_searchbar_v2.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(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final List<String> suggestions = [
    'Apple',
    'Banana',
    'Cherry',
    'Date',
    'Elderberry',
    'Fig',
    'Grape',
    'Honeydew',
    'Kiwi',
    'Lemon'
  ];

  String? searchQuery = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            StandardSearchBarV2(
              hintText: 'Search for fruits...',
              onChanged: (value) {
                setState(() {
                  searchQuery = value;
                });
              },
              onSubmitted: (value) {
                print('Search query submitted: $value');
              },
              suggestions: suggestions
                  .where((element) =>
                      element.toLowerCase().contains(searchQuery!.toLowerCase()))
                  .toList(),
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            Expanded(
              child: searchQuery == null || searchQuery!.isEmpty
                  ? Center(child: Text('Enter a search term'))
                  : ListView.builder(
                      itemCount: suggestions
                          .where((element) =>
                              element.toLowerCase().contains(searchQuery!.toLowerCase()))
                          .toList()
                          .length,
                      itemBuilder: (context, index) {
                        final String suggestion = suggestions
                            .where((element) =>
                                element.toLowerCase().contains(searchQuery!.toLowerCase()))
                            .toList()[index];
                        return ListTile(
                          title: Text(suggestion),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

1. 依赖导入：首先导入standard_searchbar_v2包。
2. 数据准备：定义一个包含搜索建议的列表suggestions。
3. UI构建：
   • 使用StandardSearchBarV2小部件创建一个搜索栏。
   • hintText属性设置提示文本。
   • onChanged回调在搜索文本变化时更新searchQuery状态。
   • onSubmitted回调在用户提交搜索时打印搜索查询。
   • suggestions属性根据当前searchQuery动态过滤建议列表。
   • decoration属性自定义搜索栏的样式。
4. 搜索结果显示：
   • 如果searchQuery为空或未设置，显示提示文本。
   • 否则，根据当前searchQuery显示过滤后的建议列表。

这个示例展示了如何使用standard_searchbar_v2插件创建一个基本的搜索功能，包括动态建议过滤和搜索结果显示。你可以根据需要进一步自定义和扩展这个示例。