Flutter搜索选择下拉框插件form_searchable_dropdown的使用

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

Flutter搜索选择下拉框插件form_searchable_dropdown的使用

插件介绍

SearchableDropdown 是一个高度可定制的 Flutter 包装器，提供了从列表中选择项目的可搜索下拉菜单。它简化了构建用户友好且功能丰富的下拉菜单的过程，并具有过滤功能，适用于交易数据。

特性

  • 搜索功能：通过搜索栏轻松过滤下拉菜单中的项目。
  • 自定义 UI：可以配置提示文本、图标、边框、光标样式等。
  • 大小写敏感选项：可以切换大小写敏感搜索。
  • 清除按钮支持：可选显示清除按钮以重置选择。
  • 处理无结果：当没有匹配结果时显示一个控件。

示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Searchable Dropdown Demo')),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0 ),
            child: SearchableDropdown<String>(
              items: const ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
              itemLabelBuilder: (item) => item,
              onChanged: (selected) => print('Selected: $selected'),
              hintText: 'Select a fruit',
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

  • 必填参数

    • items: 要在下拉菜单中显示的项目列表。
    • itemLabelBuilder: 定义如何将项目作为文本显示的函数。

  • 可选参数

    • onChanged: 当选择项更改时触发的回调函数。
    • hintText: 下拉菜单的占位符文本。
    • textFormHeight: 文本字段的高度。
    • listHeight: 下拉列表的高度。
    • hintStyle: 占位符文本的字体样式。
    • inputDecoration: 文本字段的自定义输入装饰。
    • isCaseSensitive: 是否进行大小写敏感搜索（默认为 false）。
    • noResultsWidget: 当没有搜索结果时显示的控件。
    • showClearButton: 是否显示清除搜索字段的按钮（默认为 true）。
    • cursorHeight: 文本字段中光标的高度（默认为 18.0）。
    • cursorColor: 光标的颜色（默认为 Colors.black）。
    • borderRadius: 输入字段和下拉菜单的边角半径（默认为 4.0）。
    • enabledBorderColor: 字段启用时的边框颜色（默认为 Colors.grey）。
    • dropdownIcon: 关闭时显示的下拉图标（默认为 Icons.arrow_drop_down_outlined）。
    • dropdownOpenIcon: 打开时显示的下拉图标（默认为 Icons.arrow_drop_up_outlined）。

使用说明

要使用 SearchableDropdown，首先需要添加该包到 pubspec.yaml 文件中：

dependencies:
  form_searchable_dropdown: 1.0.2

然后运行以下命令来安装依赖：

flutter pub get

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

Harmonyos Next教程
1 回复

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


当然，form_searchable_dropdown 是一个在 Flutter 中非常有用的插件，用于创建带有搜索功能的下拉框。下面是一个简单的代码示例，展示如何使用 form_searchable_dropdown 插件。

首先，确保在你的 pubspec.yaml 文件中添加 form_searchable_dropdown 依赖：

dependencies:
  flutter:
    sdk: flutter
  form_searchable_dropdown: ^2.0.0  # 请检查最新版本号

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

接下来，在你的 Dart 文件中使用 FormSearchableDropdown 组件。以下是一个完整的示例：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    final List<String> items = [
      'Apple',
      'Banana',
      'Cherry',
      'Date',
      'Elderberry',
      'Fig',
      'Grape',
      'Honeydew',
      'Indian Fig',
      'Jackfruit',
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('Form Searchable Dropdown Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormSearchableDropdown(
          hint: 'Select an item',
          searchHint: 'Search...',
          value: selectedValue,
          items: items.map((item) => DropdownMenuItem<String>(
            value: item,
            child: Text(item),
          )).toList(),
          onChanged: (value) {
            setState(() {
              selectedValue = value;
            });
          },
          isCaseSensitiveSearch: false,
        ),
      ),
    );
  }
}

代码解释

  1. 依赖导入：首先，确保导入了 form_searchable_dropdown 包。
  2. 主应用：MyApp 是根组件，定义了一个基本的 Flutter 应用。
  3. 主页面：MyHomePage 是一个有状态的组件，用于存储和更新选中的值。
  4. 下拉框数据：在 _MyHomePageState 中，定义了一个字符串列表 items，这些是要显示在下拉框中的选项。
  5. FormSearchableDropdown：
    • hint：显示在未选择任何选项时的提示文本。
    • searchHint：显示搜索框中的提示文本。
    • value：当前选中的值。
    • items：一个 DropdownMenuItem 列表，用于定义下拉框中的选项。
    • onChanged：当选项改变时的回调函数，更新 selectedValue。
    • isCaseSensitiveSearch：设置搜索是否区分大小写，这里设置为 false。

运行这段代码，你将看到一个带有搜索功能的下拉框，可以从预定义的选项列表中选择一个值。希望这个示例能帮助你理解如何在 Flutter 中使用 form_searchable_dropdown 插件。

回到顶部