Flutter 复选框CheckBox和单选开关Switch

如图所示：

Flutter 的复选框有两种形式：

1.精简版本Checkbox

2.自带标题和副标题  CheckboxListTitle  

属性 说明

Checkbox 复选框

value 是否选中此复选框

onChanged 监听 当复选框的值应该更改时调用

tristate 默认false，如果为true，复选框的值可以为true、false或null。

activeColor 选中此复选框时要使用的颜色

checkColor 选中此复选框时用于复选图标的颜色

materialTapTargetSize 配置tap目标的最小大小

CheckboxListTile 复选框

value 是否选中此复选框

onChanged 监听 当复选框的值应该更改时调用

activeColor 选中此复选框时要使用的颜色

title 列表主标题

subtitle 列表副标题

isThreeLine 默认false

dense 此列表平铺是否是垂直密集列表的一部分。

secondary 显示在复选框前面的小部件

selected 选中后文字高亮，默认false

controlAffinity  控件相对于文本的位置，默认 ListTileControlAffinity.platform

Flutter  单选Switch开关

value    单选的值

onChanged   改变时触发

activeColor    选中的颜色、背景颜色

代码如下：

import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';

class CheckBoxPage extends StatefulWidget {

@override

  _CheckBoxPageState createState() =>_CheckBoxPageState();

}

class _CheckBoxPageState extends State {

  bool  _checkboxSelected =true; //维护复选框状态

  bool  _checkboxSelectedList =true; //维护复选框状态

  bool  _switchSelected =true; //维护单选开关状态

  @override

  Widget build(BuildContext context) {

    return Scaffold(

    appBar:AppBar(

    title:Text('单选和复选框'),

        ),

        body:Column(

        crossAxisAlignment: CrossAxisAlignment.start,

          children: [

            Row(

                children: [

                    Checkbox(

                    value:_checkboxSelected,

                    activeColor: Colors.red, //选中时的颜色

                    onChanged: (value) {

                    setState(() {

                        _checkboxSelected = value;

                      });

                    }),

                Text("图书"),

              ],

            ),

            CheckboxListTile(

                secondary:Icon(Icons.print),

                title:Text('文件一'),

                // subtitle: Text('会议文件'),

                contentPadding:EdgeInsets.all(10),

                controlAffinity: ListTileControlAffinity.platform,

                selected:_checkboxSelectedList,

                dense:true,

                value:_checkboxSelectedList,

                onChanged: (value) {

                setState(() {

                    _checkboxSelectedList = value;

                  });

                }),

            Switch(

                value:_switchSelected,

                activeColor: Colors.red,

                onChanged: (value) {

                 setState(() {

                    _switchSelected = value;

                  });

                })

    ],

        ));

  }

}