Flutter 单选按钮Radio和RadioListTitle

Flutter 单选按钮组件有两种

1、Radio 

单选按钮，一般用来表现一些简单的信息

常用属性：

value：单选的值

groupValue：多个按钮选择组的值

activeColor：点击颜色变化

onChanged：点击事件

2、RadioListTile

包含更多信息的单选项，提供多种配置信息的属性，可以表现更丰富的信息。

value：单选的值

groupValue：多个按钮选择组的值

onChanged：点击事件

activeColor：点击颜色变化

secondary：在里面添加Icon图片

title 标题；

subtitle 副标题；

如图所示： 两种实现方法

代码如下：

import 'package:flutter/material.dart';

class MyRadioPage extends StatefulWidget {

@override

  _MyRadioPageState createState() =>_MyRadioPageState();

}

class _MyRadioPageState extends State {

  int _sex =1;

  int status =1;

  @override

  Widget build(BuildContext context) {

return Scaffold(

appBar:AppBar(

title:Text('单选按钮'),

        ),

        body:Column(

children: [

myRadioSex(),

            Divider(

height:10,

              color: Colors.grey,

            ),

            myRadioListTitle(),

          ],

        ));

  }

myRadioSex() {

return Column(

children: [

Row(

children: [

Radio(

///单选的值

                value:1,

                ///多个按钮选择组的值

                groupValue:_sex,

                ///点击颜色变化

                activeColor: Colors.red,

                ///点击事件

                onChanged: (value) {

setState(() {

_sex = value;

                  });

                }),

            Text('男')

],

        ),

        Row(

children: [

Radio(

value:2,

                groupValue:_sex,

                activeColor: Colors.red,

                onChanged: (value) {

setState(() {

_sex = value;

                  });

                }),

            Text('女')

],

        ),

      ],

    );

  }

myRadioListTitle() {

return Column(

children: [

RadioListTile(

value:1,

          groupValue:status,

          onChanged: (value) {

setState(() {

status = value;

            });

          },

          contentPadding:EdgeInsets.fromLTRB(5, 0, 0, 0),

          activeColor: Colors.red,

          // selectedTileColor: Colors.blue,

          title:Text("标题", style:TextStyle(color: Colors.black)),

          // subtitle:Text("这是二级标题",style: TextStyle(color: Colors.black)),

          secondary:Icon(

Icons.help,

            color: Colors.grey,

          ),

          selected:this.status ==1,

        ),

        RadioListTile(

value:2,

          groupValue:status,

          onChanged: (value) {

setState(() {

status = value;

            });

          },

          contentPadding:EdgeInsets.fromLTRB(5, 0, 0, 0),

          activeColor: Colors.red,

          // selectedTileColor: Colors.blue,

          title:Text("标题", style:TextStyle(color: Colors.black)),

          // subtitle:Text("这是二级标题",style: TextStyle(color: Colors.black)),

          secondary:Icon(

Icons.help,

            color: Colors.grey,

          ),

          selected:this.status ==2,

        ),

      ],

    );

  }

}