Flutter搜索栏插件standard_searchbar的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter搜索栏插件 standard_searchbar 的使用

standard_searchbar 是一个简单且高度可定制的搜索栏插件，适用于Flutter应用。本文将详细介绍如何安装和使用该插件，并提供一个完整的示例demo。

特性

  • 轻松实现搜索栏。
  • 自定义搜索栏外观：
    • 更改搜索图标。
    • 调整大小和颜色。
    • 个性化占位符文本。

安装

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  standard_searchbar: ^2.0.0

然后运行 flutter pub get 来安装该包。

使用方法

首先导入包：

import 'package:standard_searchbar/standard_searchbar.dart';

接下来，创建一个 StandardSearchBar 小部件：

StandardSearchBar(
  onChanged: (value) {
    // 处理搜索输入变化
  },
  onSubmitted: (value) {
    // 处理搜索提交
  },
),

示例代码

下面是一个更详细的示例，展示如何使用 StandardSearchBar 和 StandardSearchAnchor 来实现带有建议列表的搜索功能：

import 'package:flutter/material.dart';
import 'package:standard_searchbar/new/standard_search_anchor.dart';
import 'package:standard_searchbar/new/standard_search_bar.dart';
import 'package:standard_searchbar/new/standard_suggestion.dart';
import 'package:standard_searchbar/new/standard_suggestions.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Standard SearchBar Example'),
        ),
        body: const SizedBox(
          width: double.infinity,
          child: Column(
            children: [
              SizedBox(height: 100),
              SizedBox(
                width: 360,
                child: StandardSearchAnchor(
                  searchBar: StandardSearchBar(
                    bgColor: Colors.red,
                    placeholder: '请输入关键词',
                  ),
                  suggestions: StandardSuggestions(
                    suggestions: [
                      StandardSuggestion(text: '苹果'),
                      StandardSuggestion(text: '香蕉'),
                      StandardSuggestion(text: '西瓜'),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
        backgroundColor: const Color(0xFF12202F),
      ),
    );
  }
}

解释

  • StandardSearchAnchor: 提供了一个可以展开显示建议列表的搜索框。
  • StandardSearchBar: 基础搜索栏组件，允许自定义背景颜色、占位符文本等属性。
  • StandardSuggestions: 包含一组建议项。
  • StandardSuggestion: 单个建议项，包含显示文本。

通过上述代码，您可以创建一个具有基本搜索功能的应用程序，并根据用户输入动态显示相关建议。希望这个示例能帮助您快速上手 standard_searchbar 插件。如果您有任何问题或需要进一步的帮助，请随时提问！


更多关于Flutter搜索栏插件standard_searchbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter搜索栏插件standard_searchbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用standard_searchbar插件的示例代码。这个插件提供了一个美观且功能齐全的搜索栏组件。

首先，你需要在你的pubspec.yaml文件中添加standard_searchbar依赖项：

dependencies:
  flutter:
    sdk: flutter
  standard_searchbar: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的Flutter应用中使用StandardSearchBar。以下是一个完整的示例代码，展示了如何在一个简单的应用中集成和使用StandardSearchBar：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = List.generate(100, (i) => "Item ${i + 1}");
  String? searchQuery;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Standard SearchBar Demo'),
      ),
      body: Column(
        children: [
          StandardSearchBar(
            placeholder: 'Search items...',
            onSearch: (query) {
              setState(() {
                searchQuery = query;
              });
            },
          ),
          Expanded(
            child: ListView.builder(
              itemCount: searchQuery == null || searchQuery!.isEmpty
                  ? items.length
                  : items
                      .where((item) =>
                          item.toLowerCase().contains(searchQuery!.toLowerCase()))
                      .toList()
                      .length,
              itemBuilder: (context, index) {
                String itemText = searchQuery == null || searchQuery!.isEmpty
                    ? items[index]
                    : items
                        .where((item) =>
                            item.toLowerCase().contains(searchQuery!.toLowerCase()))
                        .toList()[index];
                return ListTile(
                  title: Text(itemText),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

解释

  1. 依赖项添加：在pubspec.yaml文件中添加standard_searchbar依赖项。
  2. 导入包：在代码文件中导入standard_searchbar包。
  3. 搜索栏：使用StandardSearchBar组件，并设置placeholder文本和onSearch回调函数。onSearch回调函数在用户输入查询时触发，并更新搜索查询状态。
  4. 过滤和显示结果：使用ListView.builder来显示过滤后的项目列表。如果searchQuery为空或未定义，则显示所有项目；否则，显示包含搜索查询的项目。

这个示例展示了如何使用standard_searchbar插件来创建一个简单的搜索功能，包括搜索栏和搜索结果列表的显示。你可以根据实际需求进一步自定义和扩展这个示例。

回到顶部