Flutter多选

Multi Select Flutter 是一个用于以多种方式创建多选小部件的包。

_对话框	_{底部工作表}	_选择芯片

功能

支持FormField功能，如验证器。
中性的默认设计，可以根据您的意愿进行修改。
在对话框、底部工作表或选择芯片样式小部件之间进行选择。
让您的多选功能可搜索，以处理更长的列表。

安装

将此添加到您的 pubspec.yaml 文件中

dependencies:
  multi_select_flutter: ^3.1.8

用法

MultiSelectDialogField / MultiSelectBottomSheetField

这些小部件提供了一个 InkWell 按钮，用于打开对话框或底部工作表，并具备 FormField 功能。您可以使用提供的参数根据您的喜好进行自定义。

要存储选定的值，您可以使用 onConfirm 参数。您也可以使用 onSelectionChanged 来实现。

默认情况下，这些小部件会在字段下方渲染 MultiSelectChipDisplay。这可以通过 chipDisplay 参数覆盖，或者通过使用 chipDisplay: MultiSelectChipDisplay.none() 完全删除。

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

MultiSelectDialog / MultiSelectBottomSheet

如果您希望创建自己的按钮来打开对话框或底部工作表，您可以这样做，然后调用如下函数：

MultiSelectDialog 可用于 showDialog() 的构建器中。

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

MultiSelectBottomSheet 可用于 showModalBottomSheet() 的构建器中。

void _showMultiSelect(BuildContext context) async {
  await showModalBottomSheet(
    isScrollControlled: true, // required for min/max child size
    context: context,
    builder: (ctx) {
      return  MultiSelectBottomSheet(
        items: _items,
        initialValue: _selectedAnimals,
        onConfirm: (values) {...},
        maxChildSize: 0.8,
      );
    },
  );
}

MultiSelectChipDisplay

要显示选定的项目，可以使用此小部件与您自己的按钮一起使用，也可以将其指定为 MultiSelectDialogField 等小部件的 chipDisplay 参数。

您还可以在 onTap 函数中从源列表中删除项目。

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

如此处所示，属于 MultiSelectDialogField 的 MultiSelectChipDisplay 仍渲染在 MultiSelectDialogField 的 BoxDecoration 之外。

如果要封装 MultiSelectChipDisplay，请将 MultiSelectDialogField 包装在 Container 中，然后将装饰应用于该 Container。

Container(
  decoration: BoxDecoration(...),
  child: MultiSelectDialogField(
    items: _items,
    chipDisplay: MultiSelectChipDisplay(...),
  ),
),

MultiSelectChipField

此小部件类似于 MultiSelectChipDisplay，不同之处在于这些芯片是选择项目的首要界面。

MultiSelectChipField<Animal>(
  items: _items,
  icon: Icon(Icons.check),
  onTap: (values) {
    _selectedAnimals = values;
  },
),

使用 `itemBuilder` 创建自定义项

MultiSelectChipField<Animal>(
  items: _items,
  key: _multiSelectKey,
  validator: (values) {...}
  itemBuilder: (item, state) {
    // return your custom widget here
    return InkWell(
      onTap: () {
        _selectedAnimals.contains(item.value)
			      ? _selectedAnimals.remove(item.value)
			      : _selectedAnimals.add(item.value);
	      state.didChange(_selectedAnimals);
	      _multiSelectKey.currentState.validate();
	    },
	    child: Text(item.value.name),
    );
  },
),

itemBuilder 参数接受一个函数，该函数将为提供的每个 items 创建一个小部件。

为了使用验证器和其他 FormField 功能与自定义小部件一起使用，您必须在每次更新选定项目列表时调用 state.didChange(_updatedList)。

使用 `scrollControl` 自动滚动

MultiSelectChipField(
  items: _items,
  scrollControl: (controller) {
    _startAnimation(controller);
  },
)

// waits 5 seconds, scrolls to end slow, then back fast
void _startAnimation(ScrollController controller) {
  // when using more than one animation, use async/await
  Future.delayed(const Duration(milliseconds: 5000), () async {
    await controller.animateTo(
      controller.position.maxScrollExtent,
      duration: Duration(milliseconds: 8000), 
      curve: Curves.linear);
      
    await controller.animateTo(
      controller.position.minScrollExtent,
      duration: Duration(milliseconds: 1250),
      curve: Curves.fastLinearToSlowEaseIn);
  });
}

构造函数

MultiSelectDialog

参数	类型	描述
`backgroundColor`	颜色	设置对话框的背景颜色。
`cancelText`	文本	指定取消按钮的文本。
`checkColor`	颜色	设置复选框中勾选的颜色。
`closeSearchIcon`	Icon	`Icon(Icons.close)`
`confirmText`	文本	指定确认按钮的文本。
`colorator`	颜色	Function(V) 根据其值设置单个项目的选定颜色。适用于芯片和复选框。
`高度`	双精度	为对话框设置固定高度。
`initialValue`	List<V>	选定值的列表。重新打开对话框时需要保留值。
`items`	List<MultiSelectItem<V>>	选项的源列表。
`itemsTextStyle`	TextStyle	指定芯片或列表项文本的样式。
`listType`	MultiSelectListType	更改 listType。可以是 `MultiSelectListType.LIST` 或 `MultiSelectListType.CHIP`。
`onSelectionChanged`	Function(List<V>)	当项目被选中或取消选中时触发。
`onConfirm`	Function(List)	按下确认按钮时触发。
`searchable`	布尔值	启用对话框内的搜索功能。
`searchHintStyle`	TextStyle	设置搜索提示文本的样式。
`searchIcon`	Icon	显示搜索字段的图标按钮。
`searchHint`	字符串	设置搜索字段的占位符文本。
`searchTextStyle`	TextStyle	设置搜索文本的样式。
`selectedColor`	颜色	设置选定复选框或芯片项目的颜色。
`title`	Widget	显示在对话框顶部的标题。
`unselectedColor`	颜色	设置未选中时芯片主体或复选框边框的颜色。

MultiSelectDialogField

MultiSelectDialogField 具有 MultiSelectDialog 的所有参数以及这些额外的参数

参数	类型	描述
`autovalidateMode`	AutovalidateMode	启用后，表单字段将在每次更改后立即验证并更新其错误文本。默认为禁用。
`barrierColor`	颜色	设置对话框外部空间的颜色。
`buttonText`	文本	设置按钮上显示的文本。
`buttonIcon`	Icon	指定按钮图标。
`chipDisplay`	MultiSelectChipDisplay	覆盖此字段的默认 MultiSelectChipDisplay。
`装饰`	BoxDecoration	样式化构成字段的 Container。
`key`	GlobalKey<FormFieldState>	访问 FormFieldState 方法。
`onSaved`	List<MultiSelectItem>	每当提交字段时（通常通过调用表单的 `save` 方法）都会调用的回调。
`validator`	FormFieldValidator<List>	验证。请参阅 Flutter 文档。

MultiSelectBottomSheet

参数	类型	描述
`cancelText`	文本	指定取消按钮的文本。
`checkColor`	颜色	设置复选框中勾选的颜色。
`confirmText`	文本	指定确认按钮的文本。
`closeSearchIcon`	Icon	隐藏搜索字段的图标按钮。
`colorator`	Color Function(V)	根据其值设置单个项目的选定颜色。适用于芯片和复选框。
`initialChildSize`	双精度	底部工作表的初始高度。默认为 0.3。
`initialValue`	List<V>	选定值的列表。重新打开底部工作表时需要保留值。
`items`	List<MultiSelectItem<V>>	选项的源列表。
`itemsTextStyle`	TextStyle	指定芯片或列表项文本的样式。
`listType`	MultiSelectListType	`MultiSelectListType.LIST`
`maxChildSize`	双精度	设置底部工作表的最小高度阈值。默认为 0.6。
`minChildSize`	双精度	设置底部工作表关闭前的最小高度阈值。默认为 0.3。
`onSelectionChanged`	Function(List<V>)	当项目被选中或取消选中时触发。
`onConfirm`	Function(List)	按下确认按钮时触发。
`searchable`	布尔值	切换底部工作表内的搜索功能。
`searchHint`	字符串	设置搜索字段的占位符文本。
`searchHintStyle`	TextStyle	设置搜索提示文本的样式。
`searchIcon`	Icon	显示搜索字段的图标按钮。
`searchTextStyle`	TextStyle	设置搜索文本的样式。
`selectedColor`	颜色	设置选定复选框或芯片项目的颜色。
`title`	Widget	显示在底部工作表顶部的标题。
`unselectedColor`	颜色	设置未选中时芯片主体或复选框边框的颜色。

MultiSelectBottomSheetField

MultiSelectBottomSheetField 具有 MultiSelectBottomSheet 的所有参数以及这些额外的参数

参数	类型	描述
`autovalidateMode`	AutovalidateMode	启用后，表单字段将在每次更改后立即验证并更新其错误文本。默认为禁用。
`backgroundColor`	颜色	设置底部工作表的背景颜色。
`barrierColor`	颜色	设置底部工作表外部空间的颜色。
`buttonIcon`	Icon	指定按钮图标。
`buttonText`	文本	设置按钮上显示的文本。
`chipDisplay`	MultiSelectChipDisplay	覆盖此字段的默认 MultiSelectChipDisplay。
`装饰`	BoxDecoration	样式化构成字段的 Container。
`key`	GlobalKey<FormFieldState>	可用于调用 `_multiSelectKey.currentState.validate()` 等方法。
`onSaved`	List<MultiSelectItem>	每当提交字段时（通常通过调用表单的 `save` 方法）都会调用的回调。
`shape`	ShapeBorder	应用 ShapeBorder 来改变底部工作表的边缘。默认为具有顶部圆角半径 15 的 RoundedRectangleBorder。
`validator`	FormFieldValidator<List>	验证。请参阅 Flutter 文档。

MultiSelectChipField

参数	类型	描述
`autovalidateMode`	AutovalidateMode	启用后，表单字段将在每次更改后立即验证并更新其错误文本。默认为禁用。
`chipColor`	颜色	设置芯片的颜色。
`chipShape`	ShapeBorde	为芯片定义 ShapeBorder。
`closeSearchIcon`	Icon	隐藏搜索字段的图标按钮。
`colorator`	Color Function(V)	根据其值设置单个项目的选定芯片颜色。
`装饰`	BoxDecoration	样式化构成芯片显示区域的 Container。
`headerColor`	颜色	设置页眉颜色。
`高度`	双精度	设置可选中区域的高度。
`icon`	Icon	显示在芯片标签之前的图标。
`initialValue`	List<V>	选定项目（在任何交互之前）的列表。
`itemBuilder`	Function(MultiSelectItem<V>, FormFieldState<List<V>>)	构建一个动态创建的自定义小部件，用于每个项目。
`items`	List<MultiSelectItem<V>>	选项的源列表。
`key`	GlobalKey<FormFieldState>	可用于调用 `_multiSelectKey.currentState.validate()` 等方法。
`onSaved`	List<MultiSelectItem>	每当提交字段时（通常通过调用表单的 `save` 方法）都会调用的回调。
`onTap`	Function(V)	点击芯片时触发。
`scroll`	布尔值	启用水平滚动。
`scrollBar`	HorizontalScrollBar	定义滚动条。
`scrollControl`	Function(ScrollController)	利用 ScrollController 自动滚动列表。
`searchable`	布尔值	切换搜索功能。
`searchHint`	字符串	设置搜索字段的占位符文本。
`searchHintStyle`	TextStyle	设置搜索提示文本的样式。
`searchIcon`	Icon	显示搜索字段的图标按钮。
`searchTextStyle`	TextStyle	设置搜索文本的样式。
`selectedChipColor`	颜色	设置选定芯片项目的颜色。
`selectedTextStyle`	TextStyle	设置选定芯片的 TextStyle。
`showHeader`	布尔值	确定是否显示页眉。
`文本样式`	TextStyle	设置芯片文本的样式。
`title`	Widget	显示在页眉中的标题。
`validator`	FormFieldValidator<List>	验证。请参阅 Flutter 文档。

MultiSelectChipDisplay

参数	类型	描述
`alignment`	Alignment	更改芯片的对齐方式。默认为 Alignment.centerLeft。
`chipColor`	颜色	设置芯片的颜色。
`colorator`	Color Function(V)	根据其值设置单个项目的芯片颜色。
`装饰`	BoxDecoration	样式化构成芯片显示区域的 Container。
`高度`	双精度	设置固定高度。
`icon`	Icon	显示在芯片标签之前的图标。
`items`	List<MultiSelectItem>	选定项目的源列表。
`onTap`	Function(V)	点击芯片时触发。
`scroll`	布尔值	启用水平滚动而不是换行。
`scrollBar`	HorizontalScrollBar	启用滚动条。
`shape`	ShapeBorder	为芯片定义 ShapeBorder。
`文本样式`	TextStyle	设置芯片文本的样式。

贡献

欢迎提交拉取请求。对于重大更改，请先打开一个 issue 来讨论您想进行的更改。# multi_select_flutter

GitHub

查看 Github

Multi Select Flutter - 一个用于以多种方式创建多选组件的包

Flutter多选

功能

安装

用法

MultiSelectDialogField / MultiSelectBottomSheetField

MultiSelectDialog / MultiSelectBottomSheet

MultiSelectChipDisplay

MultiSelectChipField

使用 `itemBuilder` 创建自定义项

使用 `scrollControl` 自动滚动

构造函数

MultiSelectDialog

MultiSelectDialogField

MultiSelectBottomSheet

MultiSelectBottomSheetField

MultiSelectChipField

MultiSelectChipDisplay

贡献

GitHub

带有收藏夹选项的 Startup Name Generator 应用

使用 Flutter 构建的 Fintech Dashboard 克隆

Flutter多选

功能

安装

用法

MultiSelectDialogField / MultiSelectBottomSheetField

MultiSelectDialog / MultiSelectBottomSheet

MultiSelectChipDisplay

MultiSelectChipField

使用 itemBuilder 创建自定义项

使用 scrollControl 自动滚动

构造函数

MultiSelectDialog

MultiSelectDialogField

MultiSelectBottomSheet

MultiSelectBottomSheetField

MultiSelectChipField

MultiSelectChipDisplay

贡献

GitHub

带有收藏夹选项的 Startup Name Generator 应用

使用 Flutter 构建的 Fintech Dashboard 克隆

您可能还会喜欢……

订阅 Flutter Awesome

使用 `itemBuilder` 创建自定义项

使用 `scrollControl` 自动滚动