flutter 多选按钮组件Checkbox、多选按钮加内容组件CheckboxListTile

淡淡的烟草味﹌ 2021-07-24 15:51 783阅读 0赞

多选按钮组件:
    
      Checkbox(
          value: 布尔值,
          onChanged:(value){  改变回调,第一个参数为value的值
             setState(() {
               布尔值=value;   点击会自动改变value值
             });
          },
          activeColor: Colors.red, 设置选中背景框颜色
        ),
        
    多选按钮加内容组件(内容在最左边,多选框在最右边):
    
    	 CheckboxListTile(  内容和多选框放在一行,类似卡片组件
           value:布尔值,
           
           onChanged: (v){ 改变回调,第一个参数为value的值
             setState(() {
               布尔值=value;   点击会自动改变value值
             });
           },
           
           title: Text('标题'),    和ListTitle组件展示的效果一样,会放置在最左边
           subtitle: Text('内容'),
           secondary: Icon(Icons.call),  在内容最前面设置内容
         )

代码示例:

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 uname=new TextEditingController();
      var flag=true;
      
      @override
      void initState() {  
        super.initState();
        this.uname.text="初始值";
      }
    
    
      @override
      Widget build(BuildContext context) { 
        return Container(
           child: Column(children: <Widget>[
    
             Divider(),
    
             Checkbox(
               value: flag,
               onChanged:(value){ 
                  setState(() { 
                    this.flag=value;
                  });
               },
               activeColor: Colors.red, //设置选中背景框颜色
             ),
    
             Divider(),
     
             CheckboxListTile(  //内容和多选框放在一行,类似卡片组件
               value:this.flag,
               onChanged: (v){ 
                 setState(() { 
                   this.flag=v;
                 });
               },
               title: Text('标题'),
               subtitle: Text('内容'),
               secondary: Icon(Icons.call), //在内容最前面设置内容
             )
             
    
           ]),
        );
      }
    }
    
    // 因为表单组件需要改变状态,所以要使用有状态组件