一个用于轻松创建多种多选小部件的包

Flutter 多选

Multi Select Flutter 是一个用于轻松创建多种多选小部件的包。

功能

• 支持 FormField 的特性，例如验证器。
• 中性默认设计，可以随意更改。
• 选择对话框或底部工作表样式的小部件。
• 轻松地将 `listType` 从 LIST 更改为 CHIP。
• 使您的多选 `searchable` 以处理更长的列表。

安装

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

dependencies:
  multi_select_flutter: ^2.1.0

用法

MultiSelectDialog

可以在 `showDialog()` 的 builder 中使用，并通过您自己的按钮触发。

void _showMultiSelectDialog(BuildContext context) async {
  await showDialog(
    context: context,
    builder: (ctx) {
      return  MultiSelectDialog(
        items: _animals.map((e) => MultiSelectItem(e, e)).toList(),
        initialValue: _selectedAnimals,
        onConfirm: (values) {...},
      );
    },
  );
}

MultiSelectBottomSheet

可以在 `showModalBottomSheet()` 的 builder 中使用，并通过您自己的按钮触发。

void _showMultiSelect(BuildContext context) async {
  await showModalBottomSheet(
    isScrollControlled: true, // required for min/max child size
    context: context,
    builder: (ctx) {
      return  MultiSelectBottomSheet(
        items: _animals.map((e) => MultiSelectItem(e, e)).toList(),
        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);
    });
  },
),

当使用 `chipDisplay` 参数作为 MultiSelectDialogField 的一部分时，MultiSelectChipDisplay 仍然在字段的 BoxDecoration 外部渲染，如这里所示

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

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

MultiSelectDialogField / MultiSelectBottomSheetField

这些小部件提供了一个 InkWell 按钮，用于打开对话框或底部工作表。

MultiSelectBottomSheetField(
  items: _animals.map((e) => MultiSelectItem(e, e.name)).toList(),
  listType: MultiSelectListType.CHIP,
  searchable: true,
  decoration: BoxDecoration(...),
  onConfirm: (values) {
    setState(() {
      _selectedAnimals = values;
    });
  },
  chipDisplay: MultiSelectChipDisplay(),
),

MultiSelectDialogFormField / MultiSelectBottomSheetFormField

这些小部件是 `MultiSelectDialogField` 和 `MultiSelectBottomSheetField` 的 FormField 版本。您可以使用 `validator` 和 `onSaved` 等 FormField 参数。

它带有一个默认的下边框，可以通过 `decoration` 参数覆盖。

MultiSelectDialogFormField(
	items: _animals.map((e) => MultiSelectItem(e, e.name)).toList(),
	key: _multiSelectKey,
	validator: (value) {
	  if (value == null || value.isEmpty) {
	    return  "Required";
	  }
	  return  null;
	},
	onConfirm: (values) {
	  setState(() {
	    _selectedAnimals = values;
	  });
	  _multiSelectKey.currentState.validate();
	},
),

构造函数

MultiSelectDialog

MultiSelectDialogField

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

MultiSelectBottomSheet

MultiSelectBottomSheetField

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

MultiSelectDialogFormField / MultiSelectBottomSheetFormField

这些小部件具有其非 FormField 对等项的所有参数，以及来自 FormField 类的这些额外参数

MultiSelectChipDisplay

GitHub

https://github.com/CHB61/multi_select_flutter