grouped_buttons

一套 Flutter 小部件，让对复选框和单选按钮进行分组更加容易！

安装

将以下内容添加到您的 pubspec.yaml 文件中

dependencies:
  grouped_buttons: ^1.0.3

简单用法

创建基本的 CheckboxGroup

CheckboxGroup(
  labels: <String>[
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday",
  ],
  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 指定要自动勾选哪些框。每个元素都必须匹配一个标签。这对于清除所有选择（设置为 []）很有用。如果此项不为 null，则用户必须处理更新此列表；否则，CheckboxGroup 的状态将不会更改。
itemBuilder 在需要构建 CheckboxGroup 元素时调用。
labels (必填) 一个字符串列表，用于描述每个复选框。每个标签必须是唯一的。
labelStyle 用于标签的样式。
margin CheckboxGroup 周围的空白区域。
onChange 当 CheckboxGroup 的值更改时调用。
onSelected 当用户进行选择时调用。
orientation 指定元素的显示方向。可以是 GroupedButtonsOrientation.HORIZONTAL 或 GroupedButtonsOrientation.VERTICAL。
padding 将 CheckboxGroup 插入其中的空白区域。
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 单选按钮被选中时使用的颜色。
itemBuilder 在需要构建 RadioButtonGroup 元素时调用。
labels (必填) 一个字符串列表，用于描述每个单选按钮。每个标签必须是唯一的。
labelStyle 用于标签的样式。
margin RadioButtonGroup 周围的空白区域。
onChange 当 RadioButtonGroup 的值更改时调用。
onSelected 当用户进行选择时调用。
orientation 指定元素的显示方向。可以是 GroupedButtonsOrientation.HORIZONTAL 或 GroupedButtonsOrientation.VERTICAL。
padding 将 RadioButtonGroup 插入其中的空白区域。
picked 指定要自动选择的单选按钮。每个元素都必须匹配一个标签。这对于清除已选择项（设置为 ""）很有用。如果此项不为 null，则用户必须处理更新此项；否则，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,
      ],
    );
  },
);

customusagescreenshot

GitHub

https://github.com/akshathjain/grouped_buttons