美文网首页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