当前位置:网站首页>A brief introduction to the CheckBox component of the basic components of Flutter

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

2022-07-31 03:18:00 A soybean

浅识Flutter 基本组件之CheckBox组件

常用属性如下表所示

属性名类型功能说明
valuebool设置复选框是否选中,取值包括true(选中) 、 false (没选中)
onChangedSet up to monitor the value of the checkbox changes back
tristateboolSet the check box if three states,取值包括true、false和 null
activeColorColorSet the check box selected color
checkColorColorSet the check box selected selected icon()的颜色
materialTapTargetSizedoubleThe 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, //浮标的位置
    );
  }
}

原网站

版权声明
本文为[A soybean]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/212/202207310312278531.html