Flutter分组选择插件group_select的使用

简介

group_select 是一个用于Flutter的多选组件，支持分组选择。你可以通过创建控制器来控制组件的行为，并且可以指定自定义类型。

DEMO

查看在线演示：http://group-select.esquilodigital.com.br/#/

开始使用

首先，导入包：

import 'package:group_select/group_select.dart';

使用方法

要使用该组件，需要创建一个控制器，并可以为控制器和组件指定自定义类型。

创建控制器

final controller = SelectGroupController<int>(
    lang: LangBadge.enUS,
    multiple: false,
    dark: false,
);

final groupController = SelectGroupController<String>();

初始化组件

初始化组件时需要传递一个控制器：

带有项目的组件

GroupSelect<int>(
    activeColor: Colors.red,
    title: 'With items',
    controller: controller,
    items: [
        Item(title: 'Item 1', value: 1),
        Item(title: 'Item 2', value: 2),
        Item(title: 'Item 3', value: 3),
        Item(title: 'Item 4', value: 4),
        Item(title: 'Item 5', value: 5),
    ],
)

带有分组项目的组件

GroupSelect<String>(
    title: 'With groups items',
    activeColor: Colors.green,
    controller: groupController,
    onChange: (values) {
        print(values);
    },
    groups: [
        Group(
            title: 'Grupo 1',
            id: '1',
            items: [
                Item(title: 'Item 1', value: '1'),
                Item(title: 'Item 2', value: '2'),
                Item(title: 'Item 3', value: '3'),
                Item(title: 'Item 4', value: '4'),
                Item(title: 'Item 5', value: '5'),
            ],
        ),
        Group(
            title: 'Grupo 2',
            id: '2',
            items: [
                Item(title: 'Item 1', value: '6'),
                Item(title: 'Item 2', value: '7'),
                Item(title: 'Item 3', value: '8'),
                Item(title: 'Item 4', value: '9'),
                Item(title: 'Item 5', value: '10'),
            ],
        ),
    ],
)

注意：每个分组需要有一个唯一的ID。

属性说明

分组

分组接收项目，并且必须具有唯一ID：

Group(
    title: 'Grupo 2',
    id: '2',
    items: [
        Item(title: 'Item 1', value: '6'),
        Item(title: 'Item 2', value: '7'),
        Item(title: 'Item 3', value: '8'),
        Item(title: 'Item 4', value: '9'),
        Item(title: 'Item 5', value: '10'),
    ],
)

项目

项目可以包含一个 leading，它可以是任何Widget：

Item(
    title: 'Item 4',
    value: '4',
    leading: const Icon(Icons.circle),
);

Item(
    title: 'Item 4',
    value: '4',
    leading: Image.asset('path/to/image'),
);

onChange 回调

当选择项发生变化时始终会被调用：

GroupSelect<T>(
    title: 'With groups items',
    activeColor: Colors.green,
    controller: groupController,
    onChange: (dynamic values) {
        print(values);
    }
    // ... 其他代码省略
)

activeColor 属性

可以更改活动状态下的徽章和复选框的颜色：

GroupSelect<String>(
    title: 'With groups items',
    activeColor: Colors.green,
);

dark 模式

启用组件的暗模式。请参阅在线演示中的示例。

控制器

获取选中值

如果启用了多项选择，则返回值是一个列表：

dynamic get value;

重置值

使用以下方法清除值：

void resetValues();

示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 group_select 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final itemController = SelectGroupController<int>();
  final groupController = SelectGroupController<String>(
    dark: true,
    lang: LangBadge.ptBR,
  );
  final itemControllerSingle = SelectGroupController<int>(multiple: false);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        bottomNavigationBar: ElevatedButton(
          child: const Padding(
            padding: EdgeInsets.all(10.0),
            child: Text(
              'Reset',
              style: TextStyle(fontSize: 20),
            ),
          ),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.blue),
          ),
          onPressed: () {
            itemController.resetValues();
            groupController.resetValues();
            itemControllerSingle.resetValues();
          },
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              GroupSelect<String>(
                title: 'With groups items',
                activeColor: Colors.green,
                controller: groupController,
                onChange: (values) {},
                groups: [_groupSelectWithGroup],
              ),
              _groupSelectWithItems,
              _groupSelectSingleWithItems,
            ],
          ),
        ),
      ),
    );
  }

  Group get _groupSelectWithGroup {
    return Group(
      title: 'Grupo 1',
      id: '1',
      items: [
        Item(title: 'Item 1', value: '1', leading: const Icon(Icons.circle)),
        Item(title: 'Item 2', value: '2', leading: const Icon(Icons.circle)),
        Item(title: 'Item 3', value: '3', leading: const Icon(Icons.circle)),
        Item(title: 'Item 4', value: '4', leading: const Icon(Icons.circle)),
        Item(title: 'Item 5', value: '5'),
      ],
    );
  }

  Widget get _groupSelectWithItems {
    return GroupSelect<int>(
      activeColor: Colors.red,
      title: 'With items',
      controller: itemController,
      items: [
        Item(title: 'Item 1', value: 1),
        Item(title: 'Item 2', value: 2),
        Item(title: 'Item 3', value: 3),
        Item(title: 'Item 4', value: 4),
        Item(title: 'Item 5', value: 5),
      ],
    );
  }

  Widget get _groupSelectSingleWithItems {
    return GroupSelect<int>(
      activeColor: Colors.red,
      title: 'Single With items',
      controller: itemControllerSingle,
      items: [
        Item(title: 'Item 1', value: 1),
        Item(title: 'Item 2', value: 2),
        Item(title: 'Item 3', value: 3),
        Item(title: 'Item 4', value: 4),
        Item(title: 'Item 5', value: 5),
      ],
    );
  }
}

以上示例展示了一个带有分组选择、单选和重置功能的完整Flutter应用程序。