浅识Flutter 基本组件之CheckBox组件

常用属性如下表所示

属性名	类型	功能说明
value	bool	设置复选框是否选中，取值包括true(选中) 、 false (没选中)
onChanged		设置监听复选框的值发生改变时回调
tristate	bool	设置复选框是否三态，取值包括true、false和 null
activeColor	Color	设置复选框选中时的颜色
checkColor	Color	设置复选框选中时选中图标（)的颜色
materialTapTargetSize	double	设置点击目标的大小，取值默包括 padded、shrink Wrap两种

Checkbox(value: flag,onChanged: (value){
    
       //setState更新值
       setState(() {
    
        flag=value!;
       });
     },) ,

选中后

实现横排多个选项

      body: Row(
        children: <Widget>[
          Text('选择你的阵营： '),

          Text(select[0]),
          Checkbox(
            value: flag[0],
            onChanged: (value) {
    
              //setState更新值
              setState(() {
    
                flag[0] = value!;
              });
            },
          ),


          Text(select[1]),
          Checkbox(
            value: flag[1],
            onChanged: (value) {
    
              //setState更新值
              setState(() {
    
                flag[1] = value!;
              });
            },
          ),


          Text(select[2]),
          Checkbox(
            value: flag[2],
            onChanged: (value) {
    
              //setState更新值
              setState(() {
    
                flag[2] = value!;
              });
            },
          ),
        ],
      ),

选择选项后，将选择的对象打印出来

     floatingActionButton: FloatingActionButton(

        onPressed: () {
    
          String info="你选择的阵营是：";
          for(int i=0;i<flag.length;i++){
    
            if(flag[i]) {
    /*如果选项被选中*/
              info = info + select[i]+' ';

            }
          }print(info);
        },
        tooltip: 'Increment',
        child: Icon(Icons.save),
        ),

完整代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class zhucepage extends StatefulWidget {
    
  @override
  State<StatefulWidget> createState() {
    
    return MyState();
  }
}

class MyState extends State {
    
  List flag =[false,false,false] ;
  List select=['皇后','华妃','甄嬛'];
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text('用户注册'),
        centerTitle: true,
      ),
      body: Row(
        children: <Widget>[
          Text('选择你的阵营： '),
          Text(select[0]),
          Checkbox(
            value: flag[0],
            onChanged: (value) {
    
              //setState更新值
              setState(() {
    
                flag[0] = value!;
              });
            },
          ),
          Text(select[1]),
          Checkbox(
            value: flag[1],
            onChanged: (value) {
    
              //setState更新值
              setState(() {
    
                flag[1] = value!;
              });
            },
          ),
          Text(select[2]),
          Checkbox(
            value: flag[2],
            onChanged: (value) {
    
              //setState更新值
              setState(() {
    
                flag[2] = value!;
              });
            },
          ),
        ],
      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () {
    
          String info="你选择的阵营是：";
          for(int i=0;i<flag.length;i++){
    
            if(flag[i]) {
    /*如果选项被选中*/
              info = info + select[i]+' ';

            }
          }print(info);
        },
        tooltip: 'Increment',
        child: Icon(Icons.save),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endTop, //浮标的位置
    );
  }
}