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

「爱情、让人受尽委屈。」 2021-07-25 01:21 615阅读 0赞

单选框按钮组件
    	单选框按钮必须成对出现,不能只出现一个
    	
    	   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),
              )
             
    
           ]),
        );
      }
    }
    
    // 因为表单组件需要改变状态,所以要使用有状态组件

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/c8bc53d8a78449c2b338b56f1f33f38c.png