多选功能包：Multi Select Flutter 使用指南

巫子想

于 2024-10-18 12:46:18 发布

阅读量565

点赞数 4

本文链接：https://blog.csdn.net/gitblog_01238/article/details/143049567

版权

多选功能包：Multi Select Flutter 使用指南

multi_select_flutter A flexible multi select package for Flutter. Make multi select widgets the way you want. 项目地址: https://gitcode.com/gh_mirrors/mu/multi_select_flutter

Multi Select Flutter 是一款专为Flutter平台设计的多选控件库，支持多种展示形式，包括对话框（Dialog）、底部弹出层（BottomSheet）以及选择芯片（ChoiceChip）。该库强大且灵活，适用于需要实现多选项选择的应用场景。接下来，我们将详细介绍如何安装、使用此库，并提供API的基本使用方法。

安装指南

在您的Flutter项目中添加multi_select_flutter依赖项，通过修改pubspec.yaml文件：

dependencies:
  flutter:
    sdk: flutter
  multi_select_flutter: ^最新版本号

之后，运行flutter pub get以下载并安装包。

项目的使用说明

基本使用

对话框或多选底部弹出层

MultiSelectDialogField(
  items: _animals.map((e) => MultiSelectItem(e, e.name)).toList(),
  onConfirm: (values) {
    _selectedAnimals = values;
  },
)

这段代码会创建一个带有默认选择器的对话框风格的多选字段。

自定义行为

您可以通过调用自己的函数来打开自定义的对话框或底部弹出层。

void _showMultiSelect(BuildContext context) async {
  await showDialog(
    context: context,
    builder: (ctx) => MultiSelectDialog(
      items: _items,
      initialValue: _selectedAnimals,
      onConfirm: (values) {
        setState(() {
          _selectedAnimals = values;
        });
      },
    ),
  );
}

显示选中的项目

使用MultiSelectChipDisplay可以显示已选择的项目，用户也可以在此交互中移除项目。

MultiSelectChipDisplay(
  items: _selectedAnimals.map((e) => MultiSelectItem(e, e.name)).toList(),
  onTap: (value) {
    setState(() {
      _selectedAnimals.remove(value);
    });
  },
)

API使用文档

MultiSelectDialogField/MultiSelectBottomSheetField: 直接集成到表单中，提供标准的入口和确认逻辑。
MultiSelectDialog/MultiSelectBottomSheet: 允许更自由地控制触发时机和界面布局。
MultiSelectChipDisplay: 用于展示当前所选项目，可通过onTap回调处理选择变化。
MultiSelectChipField: 提供一种基于ChoiceChip的选择模式，更适合直接作为交互界面。

自定义构建

利用itemBuilder参数，您可以完全定制每个选项的外观：

MultiSelectChipField<Animal>(
  items: _items,
  itemBuilder: (item, state) {
    return InkWell(
      onTap: () {
        // 更新选择状态并通知状态变化
        if (_selectedAnimals.contains(item.value)) {
          _selectedAnimals.remove(item.value);
        } else {
          _selectedAnimals.add(item.value);
        }
        state.didChange(_selectedAnimals); // 必须调用来更新验证状态
      },
      child: Text(item.value.name),
    );
  },
)