【Flutter】表单 - Radio, Checkbox

Radio

属性

• value radio 的取值
• groupValue radio 组的取值。value == groupValue 的时候为选中状态。
• onChanged 取值变化时候的回调
• activeColor 选中时候的颜色

class RadioWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _RadioWidget();
  }
}
class _RadioWidget extends State<RadioWidget> {
  String _value = '';
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Radio(
              value: 'a',
              activeColor: Colors.blue,
              groupValue: _value,
              onChanged: (newValue) {
                setState(() {
                  _value = newValue;
                });
              }
            ),
            Text('开')
          ],
        ),
        Row(
          children: <Widget>[
            Radio(
                value: 'b',
                activeColor: Colors.blue,
                groupValue: _value,
                onChanged: (newValue) {
                  setState(() {
                    _value = newValue;
                  });
                }
            ),
            Text('关')
          ],
        )
      ],
    );
  }
}

Checkbox

属性

• value bool 类型 true 选中，false 不选中
• tristate 如果设置成 true，value 的值可以是 null
• activeColor 选中时候的背景颜色
• checkColor 选中时候的 Icon 颜色
• materialTapTargetSize 设置 tap 响应大小

class CheckboxWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _CheckboxWidget();
  }
}
class _CheckboxWidget extends State<CheckboxWidget> {
  bool _value = false;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Checkbox(
              value: _value,
              onChanged: (newValue) {
                print('$newValue');
                setState(() {
                  _value = newValue;
                });
              },
              tristate: false,
              activeColor: Colors.red,
              checkColor: Colors.blue
            ),
          ],
        ),
      ],
    );
  }
}