美文网首页Flutter教学
Flutter(20):Material组件之Radio/Rad

Flutter(20):Material组件之Radio/Rad

作者: starryxp | 来源:发表于2020-09-28 10:29 被阅读0次

Flutter教学目录持续更新中

Github源代码持续更新中

1.Radio/RadioListTile介绍

  • Radio:单选按钮
  • RadioListTile:Radio上层封装,它的外观是提供类似设置页的选择组件,可设置图标和文字。

2.Radio属性

  • value:单选的值
  • groupValue:选择组的值
  • onChanged:改变时触发监听
  • activeColor:选中的颜色、背景颜色
  • autofocus = false,

3.RadioListTile属性

  • value:单选的值
  • groupValue:选择组的值
  • onChanged:改变时触发监听
  • activeColor:选中的颜色、背景颜色
  • title:主标题
  • subtitle:副标题
  • dense:是否是listView子控件
  • secondary:图标
  • selected:false,是否选中
  • controlAffinity:ListTileControlAffinity.platform,排列方式
  • autofocus = false,

4. Radio

1601260062311.jpg
var _sex = 0;

_myRadio(int value) {
  return Radio(
      value: value,
      groupValue: _sex,
      activeColor: Colors.green,
      onChanged: (v) {
        setState(() {
          _sex = v;
        });
      });
}

Row(
  children: [
    Text('男:'),
    _myRadio(0),
    Text('女:'),
    _myRadio(1),
  ],
),

5.RadioListTile

1601260071996.jpg
_myRadioListTile(int value) {
  return RadioListTile(
      value: value,
      title: Text('性别'),
      subtitle: Text(value == 0 ? '男' : '女'),
      activeColor: Colors.green,
      dense: true,
      secondary: Icon(Icons.people),
      controlAffinity: ListTileControlAffinity.trailing,
      selected: value == _sex ? true : false,
      groupValue: _sex,
      onChanged: (v) {
        setState(() {
          _sex = v;
        });
      });
}

_myRadioListTile(0),
_myRadioListTile(1),

下一节:Material组件之Switch/SwitchListTile

Flutter(21):Material组件之Switch/SwitchListTile

Flutter教学目录持续更新中

Github源代码持续更新中

相关文章

网友评论

    本文标题:Flutter(20):Material组件之Radio/Rad

    本文链接:https://www.haomeiwen.com/subject/mitduktx.html