Flutter分组按钮插件grouped_buttons的使用

Flutter分组按钮插件grouped_buttons的使用

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  grouped_buttons: ^1.0.4

然后运行 flutter pub get 来安装该包。

简单使用

创建基本的 CheckboxGroup

CheckboxGroup(
  labels: <String>[
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ],
  onSelected: (List<String> checked) => print(checked.toString()),
);

创建基本的 RadioButtonGroup

RadioButtonGroup(
  labels: <String>[
    "Option 1",
    "Option 2",
  ],
  onSelected: (String selected) => print(selected),
);

Basic Usage

自定义使用

自定义 CheckboxGroup

属性说明

属性名 描述
activeColor 当复选框被选中时使用的颜色。
checkColor 复选框被选中时检查图标使用的颜色。
checked 指定哪些复选框应自动选中。每个元素必须与标签匹配。此属性用于清除所有选择（将其设置为空列表）。如果此值非空，则用户必须手动更新此列表；否则，CheckboxGroup 的状态不会改变。
disabled 指定哪些复选框应被禁用。如果此值非空，则不会禁用任何复选框。传递给此参数的字符串必须与标签匹配。
itemBuilder 在需要构建 CheckboxGroup 元素时调用。
labels （必需）描述每个复选框的一组字符串。每个标签必须唯一。
labelStyle 用于标签的样式。
margin 包围复选框组的空白空间。
onChange 当复选框组的值发生变化时调用。
onSelected 当用户进行选择时调用。
orientation 指定元素的显示方向。可以是 GroupedButtonsOrientation.HORIZONTAL 或 GroupedButtonsOrientation.VERTICAL。
padding 复选框组内的内边距。
tristate 如果为 true，则复选框的值可以是 true、false 或 null。

示例代码

List<String> _checked = ["A", "B"];

CheckboxGroup(
  orientation: GroupedButtonsOrientation.HORIZONTAL,
  margin: const EdgeInsets.only(left: 12.0),
  onSelected: (List selected) => setState(() {
    _checked = selected;
  }),
  labels: <String>[
    "A",
    "B",
  ],
  checked: _checked,
  itemBuilder: (Checkbox cb, Text txt, int i) {
    return Column(
      children: <Widget>[
        Icon(Icons.polymer),
        cb,
        txt,
      ],
    );
  },
);

自定义 RadioButtonGroup

属性说明

属性名 描述
activeColor 当单选按钮被选中时使用的颜色。
disabled 指定哪些按钮应被禁用。如果此值非空，则不会禁用任何按钮。传递给此参数的字符串必须与标签匹配。
itemBuilder 在需要构建 RadioButtonGroup 元素时调用。
labels （必需）描述每个单选按钮的一组字符串。每个标签必须唯一。
labelStyle 用于标签的样式。
margin 包围单选按钮组的空白空间。
onChange 当单选按钮组的值发生变化时调用。
onSelected 当用户进行选择时调用。
orientation 指定元素的显示方向。可以是 GroupedButtonsOrientation.HORIZONTAL 或 GroupedButtonsOrientation.VERTICAL。
padding 单选按钮组内的内边距。
picked 指定哪个单选按钮应自动选中。每个元素必须与标签匹配。此属性用于清除当前选中项（将其设置为空字符串）。如果此值非空，则用户必须手动更新此值；否则，RadioButtonGroup 的状态不会改变。

示例代码

String _picked = "Two";

RadioButtonGroup(
  orientation: GroupedButtonsOrientation.HORIZONTAL,
  margin: const EdgeInsets.only(left: 12.0),
  onSelected: (String selected) => setState(() {
    _picked = selected;
  }),
  labels: <String>[
    "One",
    "Two",
  ],
  picked: _picked,
  itemBuilder: (Radio rb, Text txt, int i) {
    return Column(
      children: <Widget>[
        Icon(Icons.public),
        rb,
        txt,
      ],
    );
  },
);

Custom Usage

完整示例代码

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

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

class GroupedButtonExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Grouped Buttons Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> _checked = ["A", "B"];
  String _picked = "Two";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Grouped Buttons Example"),
      ),
      body: _body(),
    );
  }

  Widget _body() {
    return ListView(
      children: <Widget>[
        // 简单使用示例
        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0),
          child: Text(
            "Basic CheckboxGroup",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
            ),
          ),
        ),
        CheckboxGroup(
          labels: <String>[
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
          ],
          disabled: [
            "Wednesday",
            "Friday",
          ],
          onChange: (bool isChecked, String label, int index) =>
              print("isChecked: $isChecked   label: $label  index: $index"),
          onSelected: (List<String> checked) =>
              print("checked: ${checked.toString()}"),
        ),

        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0),
          child: Text(
            "Basic RadioButtonGroup",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
            ),
          ),
        ),
        RadioButtonGroup(
          labels: [
            "Option 1",
            "Option 2",
          ],
          disabled: [
            "Option 1",
          ],
          onChange: (String label, int index) =>
              print("label: $label index: $index"),
          onSelected: (String label) => print(label),
        ),

        // 自定义使用示例
        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0, bottom: 14.0),
          child: Text(
            "Custom CheckboxGroup",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
            ),
          ),
        ),
        CheckboxGroup(
          orientation: GroupedButtonsOrientation.HORIZONTAL,
          margin: const EdgeInsets.only(left: 12.0),
          onSelected: (List selected) => setState(() {
            _checked = selected;
          }),
          labels: <String>[
            "A",
            "B",
          ],
          checked: _checked,
          itemBuilder: (Checkbox cb, Text txt, int i) {
            return Column(
              children: <Widget>[
                Icon(Icons.polymer),
                cb,
                txt,
              ],
            );
          },
        ),

        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0, bottom: 14.0),
          child: Text(
            "Custom RadioButtonGroup",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0,
            ),
          ),
        ),
        RadioButtonGroup(
          orientation: GroupedButtonsOrientation.HORIZONTAL,
          margin: const EdgeInsets.only(left: 12.0),
          onSelected: (String selected) => setState(() {
            _picked = selected;
          }),
          labels: <String>[
            "One",
            "Two",
          ],
          picked: _picked,
          itemBuilder: (Radio rb, Text txt, int i) {
            return Column(
              children: <Widget>[
                Icon(Icons.public),
                rb,
                txt,
              ],
            );
          },
        ),
      ],
    );
  }
}

更多关于Flutter分组按钮插件grouped_buttons的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter分组按钮插件grouped_buttons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


grouped_buttons 是一个用于在 Flutter 中创建分组按钮的插件。它支持单选按钮组、复选框组等。以下是使用 grouped_buttons 插件的详细步骤和示例代码。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 grouped_buttons 依赖：

dependencies:
  flutter:
    sdk: flutter
  grouped_buttons: ^1.0.0+2

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

2. 导入包

在你的 Dart 文件中导入 grouped_buttons 包：

import 'package:grouped_buttons/grouped_buttons.dart';

3. 使用 RadioButtonGroup（单选按钮组）

RadioButtonGroup 用于创建一组单选按钮，用户只能选择其中一个选项。

class MyRadioButtonGroup extends StatefulWidget {
  [@override](/user/override)
  _MyRadioButtonGroupState createState() => _MyRadioButtonGroupState();
}

class _MyRadioButtonGroupState extends State<MyRadioButtonGroup> {
  String _selected = 'Option 1';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RadioButtonGroup(
          labels: <String>[
            'Option 1',
            'Option 2',
            'Option 3',
          ],
          onSelected: (String selected) => setState(() {
            _selected = selected;
          }),
          selected: _selected,
        ),
        Text('Selected: $_selected'),
      ],
    );
  }
}

4. 使用 CheckboxGroup（复选框组）

CheckboxGroup 用于创建一组复选框，用户可以选择多个选项。

class MyCheckboxGroup extends StatefulWidget {
  [@override](/user/override)
  _MyCheckboxGroupState createState() => _MyCheckboxGroupState();
}

class _MyCheckboxGroupState extends State<MyCheckboxGroup> {
  List<String> _selected = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CheckboxGroup(
          labels: <String>[
            'Option 1',
            'Option 2',
            'Option 3',
          ],
          onSelected: (List<String> selected) => setState(() {
            _selected = selected;
          }),
          selected: _selected,
        ),
        Text('Selected: $_selected'),
      ],
    );
  }
}

5. 自定义样式

你可以通过传递额外的参数来自定义按钮的样式，例如 labelStyle、activeColor、disabledColor 等。

RadioButtonGroup(
  labels: <String>[
    'Option 1',
    'Option 2',
    'Option 3',
  ],
  onSelected: (String selected) => setState(() {
    _selected = selected;
  }),
  selected: _selected,
  labelStyle: TextStyle(fontSize: 16.0, color: Colors.blue),
  activeColor: Colors.green,
  disabledColor: Colors.grey,
);

6. 完整示例

以下是一个完整的示例，展示了如何使用 RadioButtonGroup 和 CheckboxGroup：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grouped Buttons Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              MyRadioButtonGroup(),
              SizedBox(height: 20),
              MyCheckboxGroup(),
            ],
          ),
        ),
      ),
    );
  }
}

class MyRadioButtonGroup extends StatefulWidget {
  [@override](/user/override)
  _MyRadioButtonGroupState createState() => _MyRadioButtonGroupState();
}

class _MyRadioButtonGroupState extends State<MyRadioButtonGroup> {
  String _selected = 'Option 1';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RadioButtonGroup(
          labels: <String>[
            'Option 1',
            'Option 2',
            'Option 3',
          ],
          onSelected: (String selected) => setState(() {
            _selected = selected;
          }),
          selected: _selected,
        ),
        Text('Selected: $_selected'),
      ],
    );
  }
}

class MyCheckboxGroup extends StatefulWidget {
  [@override](/user/override)
  _MyCheckboxGroupState createState() => _MyCheckboxGroupState();
}

class _MyCheckboxGroupState extends State<MyCheckboxGroup> {
  List<String> _selected = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CheckboxGroup(
          labels: <String>[
            'Option 1',
            'Option 2',
            'Option 3',
          ],
          onSelected: (List<String> selected) => setState(() {
            _selected = selected;
          }),
          selected: _selected,
        ),
        Text('Selected: $_selected'),
      ],
    );
  }
}
回到顶部