Flutter基础控件篇：单选框(Switch)和复选框(Checkbox)

2023-10-07 19:18:40

前言

Flutter作为一款备受瞩目的跨平台移动应用开发框架，以其高效、灵活的特性吸引了众多开发者的青睐。在构建Flutter应用程序时，不可或缺的就是掌握基础控件的使用技巧。单选框和复选框作为常用的交互式组件，能够为用户提供便捷的选择功能，提升应用程序的交互性。

单选框(Switch)

单选框，也称为开关，是一种简单的二进制选择控件。它允许用户在两个选项之间进行选择，通常用于控制应用程序的某个功能或设置。

创建单选框

在Flutter中，可以通过Switch小部件来创建单选框。Switch小部件的构造函数需要两个参数：

value： 表示开关的当前状态，true表示打开，false表示关闭。
onChanged： 当开关状态发生改变时触发的回调函数。

Switch(
  value: _switchValue,
  onChanged: (bool value) {
    setState(() {
      _switchValue = value;
    });
  },
)

单选框的属性

Switch小部件提供了丰富的属性，可以自定义单选框的外观和行为。其中一些常用的属性包括：

activeColor： 开关打开时的颜色。
activeTrackColor： 开关打开时轨道（即背景）的颜色。
inactiveThumbColor： 开关关闭时的颜色。
inactiveTrackColor： 开关关闭时轨道（即背景）的颜色。
thumbColor： 开关大拇指（即开关本身）的颜色。
trackColor： 开关轨道的颜色。

Switch(
  value: _switchValue,
  onChanged: (bool value) {
    setState(() {
      _switchValue = value;
    });
  },
  activeColor: Colors.green,
  activeTrackColor: Colors.greenAccent,
  inactiveThumbColor: Colors.grey,
  inactiveTrackColor: Colors.grey[300],
  thumbColor: MaterialStateProperty.all(Colors.white),
  trackColor: MaterialStateProperty.all(Colors.grey[400]),
)

复选框(Checkbox)

复选框是一种允许用户选择多个选项的控件。它通常用于允许用户选择多个过滤器或设置。

创建复选框

在Flutter中，可以通过Checkbox小部件来创建复选框。Checkbox小部件的构造函数需要两个参数：

value： 表示复选框的当前状态，true表示选中，false表示未选中。
onChanged： 当复选框状态发生改变时触发的回调函数。

Checkbox(
  value: _checkboxValue,
  onChanged: (bool value) {
    setState(() {
      _checkboxValue = value;
    });
  },
)

复选框的属性

Checkbox小部件提供了丰富的属性，可以自定义复选框的外观和行为。其中一些常用的属性包括：

activeColor： 复选框选中时的颜色。
checkColor： 复选框选中时勾号的颜色。
fillColor： 复选框未选中时的填充颜色。
overlayColor： 复选框未选中时叠加的颜色。
shape： 复选框的形状。可以是圆形或方形。

Checkbox(
  value: _checkboxValue,
  onChanged: (bool value) {
    setState(() {
      _checkboxValue = value;
    });
  },
  activeColor: Colors.blue,
  checkColor: Colors.white,
  fillColor: MaterialStateProperty.all(Colors.blue[50]),
  overlayColor: MaterialStateProperty.all(Colors.blue[100]),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
)