Flutter可扩展搜索栏插件expandable_search_bar的使用

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

Flutter可扩展搜索栏插件expandable_search_bar的使用

Animated Search Bar

Animated Search Bar 插件允许您在Flutter应用程序中添加一个美观的搜索栏。

Installation 安装

  1. 将最新版本的包添加到您的pubspec.yaml（并运行dart pub get）:
dependencies:
  expandable_search_bar: ^0.0.1
  1. 导入包并在您的Flutter应用程序中使用它。
import 'package:expandable_search_bar/expandable_search_bar.dart';

Screenshots 截图

Preview1 Preview2
Preview1 Preview2

⚠注意：如您在截图中看到的，此包目前仅适用于鼠标设备（Web、Windows、macOS、Linux），但作者正在努力为移动设备提供解决方案。

Example 示例

以下是使用ExpandableSearchBar的一个完整示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ExampleSearchBar(),
    );
  }
}

class ExampleSearchBar extends StatelessWidget {
  ExampleSearchBar({Key? key}) : super(key: key);

  final TextEditingController? editTextController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expandable Search Bar Demo'),
      ),
      body: Center(
        child: ExpandableSearchBar(
          onTap: () => print(editTextController!.text.toString()),
          hintText: "Search something",
          editTextController: editTextController,
          // You can customize other properties here
          // such as width, gutter, backgroundColor, etc.
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个名为ExampleSearchBar的组件，它包含一个ExpandableSearchBar。当用户点击搜索栏时，会打印出当前输入框中的文本内容。此外，你还可以自定义其他属性，例如宽度、间距、背景颜色等。

Next Goals 下一步目标

  • 支持移动设备（遗憾的是目前只适用于"鼠标"设备）
  • 更改文本的字体样式和颜色

Support 支持

你可以通过以下方式支持作者：

希望这篇指南对你有所帮助！如果你有任何问题或建议，请随时留言。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用expandable_search_bar插件的示例代码。这个插件提供了一个高度可定制和可扩展的搜索栏组件，非常适合需要复杂搜索功能的应用。

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

dependencies:
  flutter:
    sdk: flutter
  expandable_search_bar: ^2.0.0  # 请确保使用最新版本

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

接下来，我们来看看如何在Flutter应用中使用这个插件。以下是一个简单的示例，展示了如何设置和使用一个基本的ExpandableSearchBar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expandable Search Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchBarScreen(),
    );
  }
}

class SearchBarScreen extends StatefulWidget {
  @override
  _SearchBarScreenState createState() => _SearchBarScreenState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expandable Search Bar Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ExpandableSearchBar(
          hintText: 'Search fruits...',
          leading: Icon(Icons.search),
          trailing: Icon(Icons.clear),
          onExpandChange: (expanded) {
            print('Search bar expanded: $expanded');
          },
          onSearchQueryChange: (query) {
            setState(() {
              // You can filter your suggestions here based on the query
              // For simplicity, we'll just print the query
              print('Search query: $query');
            });
          },
          onSearchSubmitted: (query) {
            print('Search query submitted: $query');
            // Handle search submission here
          },
          suggestions: suggestions.map((suggestion) {
            return SearchSuggestion(
              title: Text(suggestion),
              onTap: () {
                print('Suggestion tapped: $suggestion');
                // Handle suggestion tap here
              },
            );
          }).toList(),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个带有ExpandableSearchBar的页面。ExpandableSearchBar的属性包括：

  • hintText：搜索栏的占位符文本。
  • leading 和 trailing：分别表示搜索栏前部和后部的图标。
  • onExpandChange：搜索栏展开或折叠时的回调函数。
  • onSearchQueryChange：搜索查询变化时的回调函数，可以用于实时过滤建议列表。
  • onSearchSubmitted：用户提交搜索查询时的回调函数。
  • suggestions：建议列表，每个建议使用SearchSuggestion组件表示。

这个示例展示了如何使用expandable_search_bar插件来创建一个基本的搜索界面，你可以根据需求进一步定制和扩展这个搜索栏。

回到顶部