Flutter多项选择插件flutter_multi_select_items的使用

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

Flutter多项选择插件flutter_multi_select_items的使用

简介

flutter_multi_select_items 是一个用于创建多选组件的简单Flutter包。它易于处理且高度可定制，能够满足不同场景下的多选需求。

所有示例代码可以在这个Flutter项目中找到。

注意 - 如果遇到编译错误，请确保升级到最新版本的Flutter或尝试使用较低版本的flutter_multi_select_items。

多选容器参数

参数 描述
items MultiSelectCard列表，用于多选容器。
maxSelectableCount 最大可选数量。
itemsPadding MultiSelectCard项的内边距。
isMaxSelectableWithPerpetualSelects 如果为true，则最大选择数量 = 最大选择数量 + 永久选择项。
itemsDecoration 所有项的公共装饰。
textStyles 所有项的公共文本样式。
animations 用于多选项卡片内部的行对齐设置。
alignments 动画设置，如动画持续时间和曲线。
prefix 每个多选项前的公共可选小部件。
suffix 每个多选项后的公共可选小部件。
wrapSettings 默认所有项都在Wrap中，所以这些是Wrap的设置。
listViewSettings 如果showInListView为true，则为列表视图设置。
showInListView 如果为true，显示所有多选项目在一个列表视图中。
controller 多选控制器，允许获取所有已选项、取消选择所有项、选择所有项。
onChange 当项目被选择时调用。
onMaximumSelected 当达到最大可选数量时调用。

MultiSelectCard参数

参数 描述
value 多选项的值，可以是字符串、整数或任何类型。这也是onChange返回的值或值列表。
decorations 每个项的独特装饰，如果需要为每个项添加不同的装饰则使用此参数。否则，可以使用MultiSelectContainer中的MultiSelectDecorations。
textStyles 每个多选卡的独特文本样式，如果需要为每个复选列表添加不同的文本样式则使用此参数。
label 多选项的标签。
child 多选项的子元素，可以使用任何小部件作为子元素。
clipBehavior 项的裁剪行为。
prefix 每个项前的唯一可选小部件。
suffix 每个项后的唯一可选小部件。
selected 如果为true，则永久处于选中位置。
perpetualSelected 如果为true，则永久处于选中位置。
splashColor 项的点击颜色。
highlightColor 项的高亮颜色。
labelGap 标签与[prefix]或[suffix]之间的间距。

最小配置示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Multi Select Example')),
        body: MultiSelectContainer(
          items: [
            MultiSelectCard(value: 'Dart', label: 'Dart'),
            MultiSelectCard(value: 'Python', label: 'Python'),
            MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
            MultiSelectCard(value: 'Java', label: 'Java'),
            MultiSelectCard(value: 'C#', label: 'C#'),
            MultiSelectCard(value: 'C++', label: 'C++'),
            MultiSelectCard(value: 'Go Lang', label: 'Go Lang'),
            MultiSelectCard(value: 'Swift', label: 'Swift'),
            MultiSelectCard(value: 'PHP', label: 'PHP'),
            MultiSelectCard(value: 'Kotlin', label: 'Kotlin')
          ],
          onChange: (allSelectedItems, selectedItem) {
            print('Selected Items: $allSelectedItems');
          },
        ),
      ),
    );
  }
}

限制选择数量

MultiSelectContainer(
  maxSelectableCount: 5,
  items: [
    MultiSelectCard(value: 'Dart', label: 'Dart'),
    MultiSelectCard(value: 'Python', label: 'Python'),
    MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
    MultiSelectCard(value: 'Java', label: 'Java'),
    MultiSelectCard(value: 'C#', label: 'C#'),
    MultiSelectCard(value: 'C++', label: 'C++'),
    MultiSelectCard(value: 'Go Lang', label: 'Go Lang'),
    MultiSelectCard(value: 'Swift', label: 'Swift'),
    MultiSelectCard(value: 'PHP', label: 'PHP'),
    MultiSelectCard(value: 'Kotlin', label: 'Kotlin')
  ],
  onMaximumSelected: (allSelectedItems, selectedItem) {
    CustomSnackBar.showInSnackBar('The limit has been reached', context);
  },
  onChange: (allSelectedItems, selectedItem) {},
)

图标前缀和后缀

前缀

MultiSelectContainer(
  prefix: MultiSelectPrefix(
    selectedPrefix: const Padding(
      padding: EdgeInsets.only(right: 5),
      child: Icon(
        Icons.check,
        color: Colors.white,
        size: 14,
      ),
    ),
    disabledPrefix: const Padding(
      padding: EdgeInsets.only(right: 5),
      child: Icon(
        Icons.do_disturb_alt_sharp,
        size: 14,
      ),
    ),
  ),
  items: [
    MultiSelectCard(value: 'Dart', label: 'Dart'),
    MultiSelectCard(value: 'Python', label: 'Python'),
    MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
    MultiSelectCard(value: 'Java', label: 'Java', enabled: false),
    MultiSelectCard(value: 'C#', label: 'C#'),
  ],
  onChange: (allSelectedItems, selectedItem) {},
)

后缀

MultiSelectContainer(
  suffix: MultiSelectSuffix(
    selectedSuffix: const Padding(
      padding: EdgeInsets.only(left: 5),
      child: Icon(
        Icons.check,
        color: Colors.white,
        size: 14,
      ),
    ),
    disabledSuffix: const Padding(
      padding: EdgeInsets.only(left: 5),
      child: Icon(
        Icons.do_disturb_alt_sharp,
        size: 14,
      ),
    ),
  ),
  items: [
    MultiSelectCard(value: 'Dart', label: 'Dart'),
    MultiSelectCard(value: 'Python', label: 'Python'),
    MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
    MultiSelectCard(value: 'Java', label: 'Java', enabled: false),
    MultiSelectCard(value: 'C#', label: 'C#'),
  ],
  onChange: (allSelectedItems, selectedItem) {},
)

装饰

公共装饰

MultiSelectContainer(
  itemsDecoration: MultiSelectDecorations(
    decoration: BoxDecoration(
      gradient: LinearGradient(colors: [
        Colors.green.withOpacity(0.1),
        Colors.yellow.withOpacity(0.1),
      ]),
      border: Border.all(color: Colors.green[200]!),
      borderRadius: BorderRadius.circular(20),
    ),
    selectedDecoration: BoxDecoration(
      gradient: const LinearGradient(colors: [
        Colors.green,
        Colors.lightGreen,
      ]),
      border: Border.all(color: Colors.green[700]!),
      borderRadius: BorderRadius.circular(5),
    ),
    disabledDecoration: BoxDecoration(
      color: Colors.grey,
      border: Border.all(color: Colors.grey[500]!),
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  items: [
    MultiSelectCard(value: 'Dart', label: 'Dart'),
    MultiSelectCard(value: 'Python', label: 'Python'),
    MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
    MultiSelectCard(value: 'Java', label: 'Java'),
    MultiSelectCard(value: 'C#', label: 'C#'),
    MultiSelectCard(value: 'C++', label: 'C++'),
  ],
  onChange: (allSelectedItems, selectedItem) {},
)

每项独特装饰

MultiSelectContainer(
  items: [
    MultiSelectCard(
      value: 'Dart',
      label: 'Dart',
      decorations: MultiSelectItemDecorations(
        decoration: BoxDecoration(
          color: Colors.purple.withOpacity(0.2),
          borderRadius: BorderRadius.circular(20),
        ),
        selectedDecoration: BoxDecoration(
          color: Colors.purple,
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    ),
    MultiSelectCard(
      value: 'Python',
      label: 'Python',
      decorations: MultiSelectItemDecorations(
        decoration: BoxDecoration(
          color: Colors.lightBlue.withOpacity(0.2),
          borderRadius: BorderRadius.circular(20),
        ),
        selectedDecoration: BoxDecoration(
          color: Colors.lightBlue,
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    ),
    // ...其他项...
  ],
  onChange: (allSelectedItems, selectedItem) {},
)

文本样式

公共文本样式

MultiSelectContainer(
  textStyles: const MultiSelectTextStyles(
    textStyle: TextStyle(
      fontWeight: FontWeight.bold,
      color: Colors.lightBlue,
    ),
  ),
  items: [
    MultiSelectCard(value: 'Dart', label: 'Dart'),
    MultiSelectCard(value: 'Python', label: 'Python'),
    MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
    MultiSelectCard(value: 'Java', label: 'Java'),
    MultiSelectCard(value: 'Go Lang', label: 'Go Lang'),
    MultiSelectCard(value: 'Swift', label: 'Swift'),
    MultiSelectCard(value: 'Kotlin', label: 'Kotlin'),
  ],
  onChange: (allSelectedItems, selectedItem) {},
)

每项独特文本样式

MultiSelectContainer(
  items: [
    MultiSelectCard(
      value: 'Dart',
      label: 'Dart',
      textStyles: const MultiSelectItemTextStyles(
        textStyle: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.purple,
        ),
      ),
    ),
    MultiSelectCard(
      value: 'Python',
      label: 'Python',
      textStyles: const MultiSelectItemTextStyles(
        textStyle: TextStyle(color: Colors.lightBlue),
      ),
    ),
    // ...其他项...
  ],
  onChange: (allSelectedItems, selectedItem) {},
)

水平芯片列表

SizedBox(
  height: 60,
  child: MultiSelectContainer(
    showInListView: true,
    listViewSettings: ListViewSettings(
      scrollDirection: Axis.horizontal,
      separatorBuilder: (_, __) => const SizedBox(width: 10),
    ),
    items: [
      MultiSelectCard(value: 'Dart', label: 'Dart'),
      MultiSelectCard(value: 'Python', label: 'Python'),
      MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
      MultiSelectCard(value: 'Java', label: 'Java'),
      MultiSelectCard(value: 'C#', label: 'C#'),
      MultiSelectCard(value: 'C++', label: 'C++'),
      MultiSelectCard(value: 'Go Lang', label: 'Go Lang'),
      MultiSelectCard(value: 'Swift', label: 'Swift'),
      MultiSelectCard(value: 'PHP', label: 'PHP'),
      MultiSelectCard(value: 'Kotlin', label: 'Kotlin'),
    ],
    onChange: (allSelectedItems, selectedItem) {},
  ),
)

控制器

final MultiSelectController<String> _controller = MultiSelectController(
  deSelectPerpetualSelectedItems: true,
);

// 使用控制器
MultiSelectContainer(
  controller: _controller,
  // ...其他配置...
)

// 方法
_controller.selectAll();
_controller.deselectAll();
_controller.getSelectedItems();

任意小部件

Widget getChild(String imagePath, String title) {
  return SizedBox(
    width: 75,
    height: 50,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Expanded(
          child: Image.network(
            imagePath,
            fit: BoxFit.contain,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(title),
        )
      ],
    ),
  );
}

return MultiSelectContainer(
  itemsPadding: const EdgeInsets.all(5),
  itemsDecoration: MultiSelectDecorations(
    decoration: BoxDecoration(
      color: Colors.indigo.withOpacity(0.1),
    ),
    selectedDecoration: const BoxDecoration(
      gradient: LinearGradient(colors: [
        Colors.green,
        Colors.lightGreen,
      ]),
    ),
  ),
  items: [
    MultiSelectCard(
      value: 'Dart',
      child: getChild(
        'https://host/Dart-logo.png',
        'Dart',
      ),
    ),
    // ...其他项...
  ],
  onChange: (allSelectedItems, selectedItem) {},
);

多选检查列表视图

MultiSelectCheckList(
  maxSelectableCount: 5,
  textStyles: const MultiSelectTextStyles(
    selectedTextStyle: TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
    ),
  ),
  itemsDecoration: MultiSelectDecorations(
    selectedDecoration: BoxDecoration(color: Colors.indigo.withOpacity(0.8)),
  ),
  listViewSettings: ListViewSettings(
    separatorBuilder: (context, index) => const Divider(height: 0),
  ),
  controller: _controller,
  items: List.generate(
    _items.length,
    (index) => CheckListCard(
      value: _items[index].id,
      title: Text(_items[index].title),
      subtitle: Text(_items[index].subTitle),
      selectedColor: Colors.white,
      checkColor: Colors.indigo,
      selected: index == 3,
      enabled: !(index == 5),
      checkBoxBorderSide: const BorderSide(color: Colors.blue),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
    ),
  ),
  onChange: (allSelectedItems, selectedItem) {},
  onMaximumSelected: (allSelectedItems, selectedItem) {
    CustomSnackBar.showInSnackBar('The limit has been reached', context);
  },
)

以上是flutter_multi_select_items插件的详细使用说明及示例代码。希望对你有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，我可以为你提供一个关于如何使用 flutter_multi_select_items 插件的示例代码。这个插件允许你在 Flutter 应用中实现多项选择的列表功能。

首先，确保你已经在你的 pubspec.yaml 文件中添加了 flutter_multi_select_items 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_multi_select_items: ^x.y.z  # 请使用最新版本号替换 x.y.z

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

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

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<MultiSelectItemModel> _items = [
    MultiSelectItemModel(id: '1', name: 'Item 1'),
    MultiSelectItemModel(id: '2', name: 'Item 2'),
    MultiSelectItemModel(id: '3', name: 'Item 3'),
    MultiSelectItemModel(id: '4', name: 'Item 4'),
    MultiSelectItemModel(id: '5', name: 'Item 5'),
  ];

  List<String> _selectedIds = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Multi Select Items Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => MultiSelectDialog(
                      items: _items,
                      initialSelectedItems: _selectedIds.map((e) => _items.firstWhere((item) => item.id == e)).toList(),
                      title: 'Select Items',
                      onConfirm: (result) {
                        setState(() {
                          _selectedIds = result.map((item) => item.id).toList();
                        });
                      },
                    ),
                  ),
                );
              },
              child: Text('Select Items'),
            ),
            SizedBox(height: 16),
            Text('Selected Items:'),
            SizedBox(height: 8),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: _selectedIds.map((id) {
                var item = _items.firstWhere((item) => item.id == id);
                return Chip(
                  label: Text(item.name),
                  onDeleted: () {
                    setState(() {
                      _selectedIds.remove(id);
                    });
                  },
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：首先导入 flutter_multi_select_items 插件。
  2. 数据模型：创建一个包含多个 MultiSelectItemModel 对象的列表 _items，这些对象表示可供选择的项。
  3. 状态管理：使用 _selectedIds 列表来存储用户选择的项的 ID。
  4. UI 组件：
    • 使用 ElevatedButton 打开一个 MultiSelectDialog，让用户可以选择多个项。
    • 使用 Wrap 和 Chip 组件显示用户已选择的项，并允许用户通过点击删除图标来取消选择。

运行效果：

当你运行这个应用时，点击“Select Items”按钮会打开一个对话框，用户可以在其中选择多个项。选择完成后，已选择的项会显示在页面上，并可以通过点击删除图标来取消选择。

希望这个示例能帮助你理解如何使用 flutter_multi_select_items 插件！

回到顶部