Flutter Radio RadioListTile 单选框

Flutter Radio RadioListTile 单选框

Radio是单选框,和checkbox一样本身不包含状态,当groupValue = value时代表选中状态。

属性说明
value 、groupValue一起控制是否为选中状态,当groupValue = value时代表选中状态
onChanged变化时回调
activeColor激活状态下颜色
materialTapTargetSize点击区域,通 checkbox的materialTapTargetSize

RadioListTile的属性和 属性一样,

例子:

import 'package:flutter/material.dart';

class RadioDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _RadioDemo();
  }
}

class _RadioDemo extends State<RadioDemo> {
  String _newValue = '语文';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Radio<String>(
                value: "语文",
                groupValue: _newValue,
                onChanged: (value) {
                  setState(() {
                    _newValue = value;
                  });
                }),
            Radio<String>(
                value: "数学",
                groupValue: _newValue,
                onChanged: (value) {
                  setState(() {
                    _newValue = value;
                  });
                }),
            Radio<String>(
                value: "英语",
                groupValue: _newValue,
                onChanged: (value) {
                  setState(() {
                    _newValue = value;
                  });
                }),
          ],
        ),
        Row(
          children: <Widget>[
            Flexible(
              child: RadioListTile<String>(
                value: '语文',
                title: Text('语文'),
                groupValue: _newValue,
                onChanged: (value) {
                  setState(() {
                    _newValue = value;
                  });
                },
              ),
            ),
            Flexible(
              child: RadioListTile<String>(
                value: '数学',
                title: Text('数学'),
                groupValue: _newValue,
                onChanged: (value) {
                  setState(() {
                    _newValue = value;
                  });
                },
              ),
            ),
            Flexible(
              child: RadioListTile<String>(
                value: '英语',
                title: Text('英语'),
                groupValue: _newValue,
                onChanged: (value) {
                  setState(() {
                    _newValue = value;
                  });
                },
              ),
            ),
          ],
        ),
        Column(
          children: <Widget>[
            RadioListTile<String>(
              value: '语文',
              title: Text('语文'),
              groupValue: _newValue,
              onChanged: (value) {
                setState(() {
                  _newValue = value;
                });
              },
            ),
            RadioListTile<String>(
              value: '数学',
              title: Text('数学'),
              groupValue: _newValue,
              onChanged: (value) {
                setState(() {
                  _newValue = value;
                });
              },
            ),
            RadioListTile<String>(
              value: '英语',
              title: Text('英语'),
              groupValue: _newValue,
              onChanged: (value) {
                setState(() {
                  _newValue = value;
                });
              },
            ),
          ],
        ),
      ],
    );
  }
}


在这里插入图片描述

交流

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。

同时也