Flutter分组选择插件grouped_selection的使用

GroupedSelection 是一个在 Flutter 中用于以网格布局进行单选或多选的小组件。它支持添加图标和文本，提供了交互式且视觉上吸引人的选择方式。

特性

• 单选或多选：可以轻松切换单个或多个项目的选择模式。
• 自定义图标：为每个项目添加左侧和/或右侧图标，以便更好地视觉表示。
• 动态网格布局：指定列数以控制项目排列方式。
• 选择更改回调：在所选项目发生变化时获得通知，允许你处理所选数据。

示例

安装

在 pubspec.yaml 文件中添加 grouped_selection：

dependencies:
  grouped_selection: ^0.1.0

然后运行 flutter pub get 来获取该包。

使用

基本示例

以下是如何在你的 Flutter 应用中使用 GroupedSelection 的基本示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Grouped Selection Example")),
        body: Center(
          child: GroupedSelection(
            items: [
              SelectionItem(text: 'Item 1'),
              SelectionItem(text: 'Item 2'),
              SelectionItem(text: 'Item 3'),
            ],
            columnCount: 2,
            onSelectionChanged: (selectedItems) {
              // 处理选择更改
            },
          ),
        ),
      ),
    );
  }
}

自定义

你可以通过多种参数来自定义 GroupedSelection：

GroupedSelection(
  items: [
    SelectionItem(text: 'Item 1', leftIcon: Icons.star),
    SelectionItem(text: 'Item 2', rightIcon: Icons.check),
    SelectionItem(text: 'Item 3', leftIcon: Icons.star, rightIcon: Icons.check),
  ],
  columnCount: 3,
  multiple: true,
  onSelectionChanged: (selectedItems) {
    // 处理多选更改
    print('Selected items: $selectedItems');
  },
)

参数

• items：一个包含 SelectionItem 对象的列表，每个对象代表网格中的一个可选项。
• columnCount：网格中的列数，默认为 1。
• multiple：一个布尔值，确定是否可以选择多个项目，默认为 false。
• onSelectionChanged：当选择更改时调用的回调函数，提供当前选中的 SelectionItem 列表。

SelectionItem 类

SelectionItem 类用于定义每个可选项的属性：

SelectionItem({
  required this.text,
  this.leftIcon,
  this.rightIcon,
  this.isSelected = false,
});

• text：项目的标签。
• leftIcon：显示在文本左侧的可选图标。
• rightIcon：显示在文本右侧的可选图标（仅在选中时可见）。
• isSelected：一个布尔值，指示项目是否被选中。这由 GroupedSelection 小组件内部管理。

示例代码

你可以找到完整的示例代码在 example 目录。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Grouped Selection Example")),
        body: Center(
          child: GroupedSelection(
            items: [
              SelectionItem(text: 'Item 1'),
              SelectionItem(text: 'Item 2'),
              SelectionItem(text: 'Item 3'),
            ],
            columnCount: 2,
            onSelectionChanged: (selectedItems) {
              // 处理选择更改
            },
          ),
        ),
      ),
    );
  }
}