Flutter Checkbox、CheckboxListTile、Radio、RadioListTile、Switch 选择相关的表单 Widget

一、Checkbox 和 CheckboxListTile

1、

Flutter 实现了 Checkbox 的默认动画样式，支持的属性如下：

  const Checkbox({
    Key key,
    @required this.value,
    this.tristate = false,
    @required this.onChanged,
    this.activeColor,
    this.checkColor,
    this.materialTapTargetSize,
  })

其中 value 是 bool 类型的：

  /// Whether this checkbox is checked.
  ///
  /// This property must not be null.
  final bool value;

实现一个最简单 Checkbox，并且通过 state 显示文案：

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Checkbox(
      activeColor: Colors.pink,
      checkColor: Colors.blue,
      value: this._flag,
      onChanged: (value) {
        setState(() {
          this._flag = value;
        });
      },
    ),
    Container(
      child: Text(this._flag ? '选中' : '未选中'),
    ),
  ],
)

效果：

2、CheckboxListTile

在 APP 中我们经常遇到的选择场景往往是 ListView 形式的，因为 APP 需要点击区域够大，信息足够明确

CheckboxListTile 提供了类似 ListTile 样式的多选框，并且本身 CheckboxListTile 也是基于 ListTile 实现的

  CheckboxListTile(
    title: Text('标题'),
    subtitle: Text('二级标题'),
    activeColor: Colors.pink,
    secondary: Image.network(
      IMAGE_SRC,
      fit: BoxFit.cover,
      // color: Colors.grey[200],
      width: 60,
    ),
    value: this._flag,
    onChanged: (value) {
      setState(() {
        this._flag = value;
      });
    },
  ),
  Divider(),
  CheckboxListTile(
    title: Text('标题'),
    subtitle: Text('二级标题'),
    activeColor: Colors.pink,
    secondary: Icon(Icons.panorama),
    selected: this._flag,
    value: this._flag,
    onChanged: (value) {
      setState(() {
        this._flag = value;
      });
    },
  )

同样的，支持传入 value 和 onChanged，其他的属性和 ListTile 其实是差不多的

效果：

二、Radio 和 RadioListTile

1、Radio

Radio 和 Checkbox 不同的地方在于，一般都是两个或以上的 Radio Wdiget 一起起作用

因此多个 Radio 往往绑定的是同一个值或者说是 state（同一个值得说法并不准确）

因此 Radio 又多了一个 required 的属性 groupValue，所谓的 groupValue 其实就是绑定在同一个 state 上的，当一个 Radio 被选中的时候，它的 value 就会传递给 groupValue（在 onchanged 中处理）

只要 groupValue 指向同一个变量，就说明这些 Radio 是同一个 group 中的，只会有一个被选中

  const Radio({
    Key key,
    @required this.value,
    @required this.groupValue,
    @required this.onChanged,
    this.activeColor,
    this.materialTapTargetSize,
  }) : super(key: key);

使用 Radio 实现单选：

  Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Radio(
        value: 1,
        activeColor: Colors.pink,
        groupValue: this._sex,
        onChanged: (value) {
          setState(() {
            this._sex = value;
          });
        },
      ),
      Text('男'),
      Radio(
        value: 2,
        activeColor: Colors.pink,
        groupValue: this._sex,
        onChanged: (value) {
          setState(() {
            this._sex = value;
          });
        },
      ),
      Text('女'),
    ],
  ),
  Row(
    children: <Widget>[
      Text('选择的值是：${this._sex} : ${this._sex == 1 ? '男' : '女'}'),
    ],
  ),

效果：

2、RadioListTile

和 CheckboxListTile 类似，也是基于 ListTile 实现的

同样，会多一个 groupValue 属性

RadioListTile(
  activeColor: Colors.pink,
  title: Text('标题'),
  subtitle: Text('二级标题'),
  secondary: Icon(Icons.person),
  selected: this._sex == 1,
  value: 1,
  groupValue: this._sex,
  onChanged: (value) {
    setState(() {
      this._sex = value;
    });
  },
),
Divider(height: 1),
RadioListTile(
  activeColor: Colors.pink,
  title: Text('标题'),
  subtitle: Text('二级标题'),
  secondary: Image.network(IMAGE_SRC, fit: BoxFit.cover),
  selected: this._sex == 2,
  value: 2,
  groupValue: this._sex,
  onChanged: (value) {
    setState(() {
      this._sex = value;
    });
  },
),

效果:

三、Switch

Switch 比较简单没什么好说的，不过默认的设计风格是 Android 的设计风格，并非 iOS

Switch(
  activeColor: Colors.pink,
  value: this._flag,
  onChanged: (value) {
    setState(() {
      this._flag = value;
    });
  },
),

效果：

四、完整代码：

Postbird

一、Checkbox 和 CheckboxListTile

1、

2、CheckboxListTile

二、Radio 和 RadioListTile

1、Radio

2、RadioListTile

三、Switch

四、完整代码：

1、Checkbox 和 CheckboxListTile

2、Radio 和 RadioListTile

3、Switch

添加新评论