flutter 单选框按钮组件Radio、单选框卡片组件 RadioListTile、开关组件Switch、开关卡片组件SwitchListTile

单选框按钮组件
	单选框按钮必须成对出现,不能只出现一个
	
	   Radio(
        value:点击后传递的值,
        onChanged:(v){  回调参数是value的内容
        	setState(){变量=v };  
        },
        groupValue:变量, 多个按钮相的该值相同时成为一个按钮组,当值与value相等时,会被选中
      ),

单选框卡片组件
	按钮-内容- secondary组件的内容
	
	  RadioListTile(  
        value: 点击后传递的值,
        onChanged: (v){ 回调参数是value的内容
          setState(() {
            变量=v;    使得被选中
          });
        },
        groupValue:变量,  当变量的值和value相等时,会被选中
        title: Text('标题'),
        subtitle: Text('二级标题'),
        secondary: , 末尾组件内容
        selected: 布尔值,  //true/false,为true时文字高亮
      ),

 开关组件
 	   Switch(
        value:flag,    布尔值
        onChanged:(v){  回调参数为value的值
          setState(() {
            this.flag=v;   点击会自动改变状态
          });
        }
      )
      
开关卡片组件
  secondary组件内容-内容-开关按钮
  
	 SwitchListTile(
        value:布尔变量,
        
        onChanged:(v){  回调参数是value值
          setState(() {
            布尔变量=v;  点击自动改变状态
          });
        },
        title: Text('标题'), 
        subtitle: Text('第二标题'),
        secondary: ,  开头组件内容
      )

代码示例:

import 'package:flutter/material.dart';

class Home4 extends StatefulWidget {
  Home4({Key key}) : super(key: key);

  @override
  _Home2State createState() => _Home2State();
}

class _Home2State extends State<Home4> {

  var sex=1;
  bool flag=true;
  @override
  void initState() { 
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Container(
       child: Column(children: <Widget>[

          Text('男'),
          Radio(
            value:1,
            onChanged:(v){
              setState(() {
                this.sex=v;
              });
            },
            groupValue: this.sex, //相同时候成为一个按钮组,当值与value相等时,会被选中
          ),
         SizedBox(width: 20,),
         Text('女'),
          Radio(
            value:2,
            onChanged:(v){
              setState(() {
                this.sex=v;
              });
            },
            groupValue: this.sex,
          ),

          //成对出现、且必须得垂直布局
          //和卡片布局相似,按钮-文字内容-字体图标
          RadioListTile(  
            value: 1,
            onChanged: (v){
              setState(() {
                this.sex=v;
              });
            },
            groupValue:this.sex,
            title: Text('标题'),
            subtitle: Text('二级标题'),
            secondary: Icon(Icons.home),
            selected: this.sex==1,  //true/false,为true时文字高亮

          ),
          RadioListTile(
            value: 2,
            onChanged: (v){
              setState(() {
                this.sex=v;
              });
            },
            groupValue:this.sex,
            title: Text('标题'),
            subtitle: Text('二级标题'),
            secondary: Icon(Icons.home),
            selected: this.sex==2,

          ),
          SizedBox(height: 40,),
          Switch(
            value:flag,
            onChanged:(v){
              setState(() {
                this.flag=v;
              });
            }
          ),
          SizedBox(height: 20,),
          SwitchListTile(
            value:this.flag,
            onChanged:(v){
              setState(() {
                this.flag=v;
              });
            },
            title: Text('标题'),
            subtitle: Text('第二标题'),
            secondary: Icon(Icons.home),
          )
         

       ]),
    );
  }
}

// 因为表单组件需要改变状态,所以要使用有状态组件

效果图: