Flutter Radio RadioListTile 单选框

Flutter 系列文章 总体目录

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

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

RadioListTile的属性和 CheckboxListTile属性一样,

例子:

import 'package:flutter/material.dart';

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

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

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


Flutter Radio RadioListTile 单选框_第1张图片

交流

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

同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。

Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

你可能感兴趣的:(Flutter)