Flutter分组选择插件grouped_checkbox的使用

Flutter分组选择插件grouped_checkbox的使用

概述

GroupedCheckbox 是一个用于在Flutter应用中显示复选框列表的插件。它支持多种布局方式和自定义选项，适用于需要分组选择功能的场景。

功能特性

• 支持泛型数据类型：可以处理不同类型的数据。
• 多种布局方式：支持垂直、水平和Wrap（自动换行）三种布局。
• 禁用状态支持：可以设置某些项为不可选状态。
• 状态变化回调：提供回调函数以处理选择状态的变化。

安装

要使用 grouped_checkbox 插件，首先需要将其添加到 pubspec.yaml 文件的依赖项中：

dependencies:
  grouped_checkbox: 2.0.0

使用示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 GroupedCheckbox 插件。该示例包括垂直、水平和Wrap三种布局方式，并且展示了如何处理选择状态的变化。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Grouped Checkbox Demo',
      home: MyHomePage(title: 'Grouped Checkbox Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义颜色项列表
  final List<ColorItem> allItemList = [
    ColorItem('Red', Colors.red),
    ColorItem('Green', Colors.green),
    ColorItem('Blue', Colors.blue),
    ColorItem('Yellow', Colors.yellow),
    ColorItem('Black', Colors.black),
    ColorItem('Violet', Colors.purple),
  ];

  // 初始化已选中的项
  List<ColorItem> selectedVerticalItems = [];
  List<ColorItem> selectedHorizontalItems = [];
  List<ColorItem> selectedWrapItems = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化部分已选中的项
    selectedVerticalItems = [allItemList[2], allItemList[3]];
    selectedHorizontalItems = [allItemList[3], allItemList[4]];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text(widget.title!, style: TextStyle(color: Colors.white)),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            // 垂直布局示例
            buildCheckboxSection(
                'VERTICAL ORIENTATION EXAMPLE',
                CheckboxOrientation.vertical,
                selectedVerticalItems,
                updateVerticalItems,
                [allItemList[0]]),
            Divider(height: 2.0),
            // 水平布局示例
            buildCheckboxSection(
                'HORIZONTAL ORIENTATION EXAMPLE',
                CheckboxOrientation.horizontal,
                selectedHorizontalItems,
                updateHorizontalItems,
                [allItemList[1]]),
            Divider(height: 2.0),
            // Wrap布局示例
            Container(
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.blue),
                  borderRadius: BorderRadius.all(Radius.circular(8.0))),
              margin: EdgeInsets.only(left: 15.0, right: 15.0, top: 15.0),
              height: MediaQuery.of(context).size.height / 4,
              width: MediaQuery.of(context).size.width,
              child: buildCheckboxSection(
                  'WRAP ORIENTATION EXAMPLE',
                  CheckboxOrientation.wrap,
                  selectedWrapItems,
                  updateWrapItems,
                  [allItemList[2]]),
            ),
            SizedBox(height: 50.0),
          ],
        ),
      ),
    );
  }

  // 更新垂直布局的选择项
  void updateVerticalItems(List<ColorItem> newItems) {
    setState(() {
      selectedVerticalItems = newItems;
    });
  }

  // 更新水平布局的选择项
  void updateHorizontalItems(List<ColorItem> newItems) {
    setState(() {
      selectedHorizontalItems = newItems;
    });
  }

  // 更新Wrap布局的选择项
  void updateWrapItems(List<ColorItem> newItems) {
    setState(() {
      selectedWrapItems = newItems;
    });
  }

  // 构建复选框部分
  Widget buildCheckboxSection(
      String title,
      CheckboxOrientation orientation,
      List<ColorItem> selectedItems,
      Function(List<ColorItem>) updateFunction,
      List<ColorItem> disabledItems) {
    return Padding(
      padding: const EdgeInsets.only(top: 15.0, bottom: 15.0),
      child: Column(
        children: <Widget>[
          // 标题
          Text(
            title,
            style: TextStyle(color: Colors.blue, fontSize: 15.0),
          ),
          // 复选框组件
          GroupedCheckbox<ColorItem>(
            itemList: allItemList, // 所有项
            checkedItemList: selectedItems, // 已选中的项
            disabled: disabledItems, // 禁用的项
            onChanged: (itemList) {
              updateFunction(itemList!); // 回调函数
            },
            orientation: orientation, // 布局方式
            checkColor: Colors.purpleAccent, // 选中时的勾选颜色
            activeColor: Colors.lightBlue, // 选中时的背景颜色
            itemWidgetBuilder: (item) => Text(
              item.name,
              style: TextStyle(color: item.color), // 自定义项的显示样式
            ),
          ),
          SizedBox(height: 5.0),
          // 显示已选中的项
          Text(
            'Selected Colors: ${selectedItems.map((item) => item.name).join(', ')}',
            style: TextStyle(color: Colors.blue),
          ),
        ],
      ),
    );
  }
}

// 颜色项类
class ColorItem {
  String name;
  Color color;

  ColorItem(this.name, this.color);
}