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

多选按钮组件:

  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), //在内容最前面设置内容
         )
         

       ]),
    );
  }
}

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