A brief introduction to the CheckBox component of the basic components of Flutter

常用属性如下表所示

属性名	类型	功能说明
value	bool	设置复选框是否选中,取值包括true(选中) 、 false (没选中)
onChanged		Set up to monitor the value of the checkbox changes back
tristate	bool	Set the check box if three states,取值包括true、false和 null
activeColor	Color	Set the check box selected color
checkColor	Color	Set the check box selected selected icon（)的颜色
materialTapTargetSize	double	The size of the set click target,Values implied including padded、shrink Wrap两种

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

选中后

Implement the horizontally multiple options

      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!;
              });
            },
          ),
        ],
      ),

选择选项后,Will choose print

     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, //浮标的位置
    );
  }
}