欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-29 23:11:47
...
单选框按钮组件
	单选框按钮必须成对出现,不能只出现一个
	
	   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),
          )
         

       ]),
    );
  }
}

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

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

相关标签: flutter