Flutter搜索选择列表插件easy_search_selectable_list的使用

Flutter搜索选择列表插件easy_search_selectable_list的使用

特性

  • 可搜索的下拉列表

开始使用

首先，在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  easy_search_selectable_list: ^0.0.3

然后运行 flutter pub get 命令以获取该依赖项。

使用方法

单值可选列表

以下是一个简单的示例，展示了如何使用 EasySearchSelectableDropdown 插件创建一个单值可选列表。

import 'package:flutter/material.dart';
import 'package:easy_search_selectable_list/easy_search_selectable_dropdown.dart';

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final TextEditingController _areaTextEditingController = TextEditingController();
  List<String> _areaList = ['选项1', '选项2', '选项3', '选项4'];
  String? _selectedArea;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('搜索选择列表'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: EasySearchSelectableDropdown(
          textEditingController: _areaTextEditingController,
          title: '区域',
          hint: '请选择区域',
          options: _areaList,
          selectedOptions: [_selectedArea],
          onChanged: (selectedIds) {
            setState(() {
              _selectedArea = selectedIds.first;
            });
          },
        ),
      ),
    );
  }
}

在上述代码中：

  • textEditingController: 用于控制输入框的文本。
  • title: 下拉列表的标题。
  • hint: 输入框的提示文字。
  • options: 可供选择的选项列表。
  • selectedOptions: 当前选中的选项。
  • onChanged: 当选择发生变化时触发的回调函数。
多值可选列表

如果你希望用户可以选择多个值，可以稍微修改一下代码。以下是多值可选列表的示例：

import 'package:flutter/material.dart';
import 'package:easy_search_selectable_list/easy_search_selectable_dropdown.dart';

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final TextEditingController _areaTextEditingController = TextEditingController();
  List<String> _areaList = ['选项1', '选项2', '选项3', '选项4'];
  List<String> _selectedAreas = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('搜索选择列表'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: EasySearchSelectableDropdown(
          textEditingController: _areaTextEditingController,
          title: '区域',
          hint: '请选择区域',
          options: _areaList,
          selectedOptions: _selectedAreas,
          onChanged: (selectedIds) {
            setState(() {
              _selectedAreas = selectedIds;
            });
          },
        ),
      ),
    );
  }
}

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

1 回复

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


easy_search_selectable_list 是一个 Flutter 插件，用于创建一个可搜索和可选择的项目列表。它非常适合用于需要在大量选项中进行搜索和选择的场景，如选择国家、城市、产品等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  easy_search_selectable_list: ^1.0.0  # 请使用最新版本

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

基本用法

以下是一个简单的示例，展示了如何使用 easy_search_selectable_list 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Easy Search Selectable List Example'),
        ),
        body: SearchSelectableListExample(),
      ),
    );
  }
}

class SearchSelectableListExample extends StatelessWidget {
  final List<String> items = [
    'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape', 'Honeydew'
  ];

  @override
  Widget build(BuildContext context) {
    return EasySearchSelectableList(
      items: items,
      onItemSelected: (selectedItem) {
        print('Selected: $selectedItem');
      },
      itemBuilder: (context, item) {
        return ListTile(
          title: Text(item),
        );
      },
      searchHint: 'Search for an item...',
    );
  }
}

参数说明

  • items: 需要显示和搜索的项目列表。
  • onItemSelected: 当用户选择一个项目时调用的回调函数。
  • itemBuilder: 用于构建每个列表项的构建器函数。
  • searchHint: 搜索框中的提示文本。
  • debounceDuration: 搜索输入框的防抖时间（默认 300 毫秒）。
  • maxHeight: 列表的最大高度。
  • selectedItem: 当前选中的项目。
  • onSearchChanged: 当搜索文本发生变化时调用的回调函数。

高级用法

你可以根据需要自定义列表项的外观和行为。例如，你可以使用 itemBuilder 来构建复杂的列表项，或者使用 onSearchChanged 来监听搜索文本的变化。

EasySearchSelectableList(
  items: items,
  onItemSelected: (selectedItem) {
    print('Selected: $selectedItem');
  },
  itemBuilder: (context, item) {
    return Card(
      child: ListTile(
        title: Text(item),
        subtitle: Text('Subtitle for $item'),
        leading: Icon(Icons.fruit),
        trailing: Icon(Icons.arrow_forward),
      ),
    );
  },
  searchHint: 'Search for an item...',
  onSearchChanged: (searchText) {
    print('Searching for: $searchText');
  },
);
回到顶部