21 Flutter CheckBox CheckBoxListTitle Radio RadioListTitle

CheckBox CheckBoxListTitle Radio RadioListTitle

1.CheckBox属性

value	是否选中此复选框
onChanged	监听 当复选框的值应该更改时调用
tristate	默认false，如果为true，复选框的值可以为true、false或null。
activeColor	选中此复选框时要使用的颜色
checkColor	选中此复选框时用于复选图标的颜色
materialTapTargetSize	配置tap目标的最小大小

              Checkbox(
                value: this.flag,
                onChanged: (v){
                  setState(() {
                     this.flag=v;
                  });
                },
                activeColor: Colors.red,
              )

2.CheckBoxListTitle

value	是否选中此复选框
onChanged	监听 当复选框的值应该更改时调用
activeColor	选中时颜色
title	列表主标题
subtitle	列表副标题
isThreeLine	默认false
dense	此列表平铺是否是垂直密集列表的一部分。
secondary	显示在复选框前面的小部件
selected	选中后文字高亮，默认false
controlAffinity	控件相对于文本的位置，默认 ListTileControlAffinity.platform

  CheckboxListTile(
                value: this.flag,
                onChanged: (v){
                  setState(() {
                     this.flag=v;
                  });
                },
                title: Text("标题"),
                subtitle:Text("这是二级标题") ,
                secondary:Icon(Icons.help)
            )

3.Radio

等价于Android中RadioButton，与CheckBox有差异的是，通过value和groupValue二者可以关联起来,但用于单选，checkBox用于多选

value 、groupValue	选中状态，当groupValue = value 一组代表选中状态
onChanged	变化时回调
activeColor	激活状态下颜色
materialTapTargetSize	点击区域，通 checkbox的materialTapTargetSize

            Row(
              children: <Widget>[
                Text("男:"),
                Radio(
                  value:1,
                  onChanged: (v){
                    setState(() {
                       this.sex=v;
                    });
                  },
                  groupValue:this.sex ,
                ),
                SizedBox(width: 20),
                Text("女:"),
                Radio(
                  value:2,
                  onChanged: (v){
                    setState(() {
                       this.sex=v;
                    });
                  },
                  groupValue:this.sex ,
                )
              ],
            ),

4.RadioListTitle

value，groupValue	选中状态，当groupValue = value 一组代表选中状态
onChanged	当选择此 radio 的时候 的回调。 参数就是 此 value 的值
activeColor	选中的颜色
title	标题， 具有代表性的就是 Text
subtitle	副标题（在 title 下面）， 具有代表性的就是 Text
isThreeLine = false：// 是否是三行文本	true ： 副标题 不能为 null false：如果没有副标题 ，就只有一行， 如果有副标题 ，就只有两行
dense	是否密集垂直
secondary	左边的一个控件
selected = false：	text 和 icon 的 color 是否 是 activeColor 的颜色
controlAffinity= ListTileControlAffinity.platform：	ListTileControlAffinity.platform 根据不同的平台，来显示 对话框 的位置 ListTileControlAffinity.trailing：勾选在右，title 在中，secondary 在左 ListTileControlAffinity.leading ：勾选在左，title 在中，secondary 在右

重要参数：

value，groupValue ：选中状态，当groupValue = value 一组代表选中状态

onChanged： 当选择此 radio 的时候 的回调。 参数就是 此 value 的值

selected = false：text 和 icon 的 color 是否 是 activeColor 的颜色

controlAffinity = ListTileControlAffinity.platform：

• ListTileControlAffinity.platform 根据不同的平台，来显示 对话框 的位置
• ListTileControlAffinity.trailing：勾选在右，title 在中，secondary 在左
• ListTileControlAffinity.leading ：勾选在左，title 在中，secondary 在右

代码案例：

import 'package:flutter/material.dart';
main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Image")),
        body: RadioDemo(),
      ),
    );
  }
}

class RadioDemo extends StatefulWidget {
  RadioDemo({Key key}) : super(key: key);
  _RadioDemoState createState() => _RadioDemoState();
}

class _RadioDemoState extends State<RadioDemo> {

  int sex=1;

  bool flag=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Radio"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[

            Row(
              children: <Widget>[
                Text("男:"),
                Radio(
                  value:1,
                  onChanged: (v){
                    setState(() {
                       this.sex=v;
                    });
                  },
                  groupValue:this.sex ,
                ),
                SizedBox(width: 20),
                Text("女:"),
                Radio(
                  value:2,
                  onChanged: (v){
                    setState(() {
                       this.sex=v;
                    });
                  },
                  groupValue:this.sex ,
                )
              ],
            ),
            Row(
              children: <Widget>[
                Text("${this.sex}"),
                Text(this.sex==1?"男":"女")
              ],
            ),
            SizedBox(height: 40),
            RadioListTile(
                value:1,
                onChanged: (v){
                  setState(() {
                      this.sex=v;
                  });
                },
                activeColor:Colors.red ,
                groupValue:this.sex ,
                 title: Text("标题",style: TextStyle(color: Colors.yellow)),
                subtitle:Text("这是二级标题") ,
                secondary:Icon(Icons.help),
                selected: this.sex==1,
            ),
            RadioListTile(
                value:2,
                onChanged: (v){
                  setState(() {
                      this.sex=v;
                  });
                },
              controlAffinity: ListTileControlAffinity.trailing,
              groupValue:this.sex ,
                title: Text("标题"),
                subtitle:Text("这是二级标题") ,
                secondary:Image.network('https://www.itying.com/images/flutter/1.png'),
                selected: this.sex==2,
            ),
            SizedBox(height: 40),

            Switch(
              value: this.flag,
              onChanged: (v){
                setState(() {
                  print(v);
                  this.flag=v;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

5. switch开关

属性

activeColor	激活时原点的颜色。
activeThumbImage	ImageProvider - 原点还支持图片，激活时的效果。
activeTrackColor	激活时横条的颜色。
inactiveThumbColor	非激活时原点的颜色。
inactiveThumbImage	ImageProvider - 非激活原点的图片效果。如果 inactiveThumbColor 也设置了 ， 以 inactiveThumbImage 为准
inactiveTrackColor	Color - 非激活时横条的颜色。
onChanged	改变时触发。
value	切换按钮的值。

            Switch(
              value: this.flag,
              activeColor: Colors.yellow,
              inactiveTrackColor: Colors.green,
              inactiveThumbImage: AssetImage('images/a.jpeg'),
              activeThumbImage: NetworkImage("https://www.itying.com/images/flutter/2.png"),
              onChanged: (v){
                setState(() {
                  print(v);
                  this.flag=v;
                });
              },

6.CupertinoSwitch

 CupertinoSwitch(
              value: this.flag,
              activeColor: Colors.yellow,
              trackColor: Colors.red,
              onChanged: (v) {
                setState(() {
                  print(v);
                  this.flag = v;
                });
              },
            ),

7.设置Switch开关大小技巧—————常用

在flutter中使用CupertinoSwitch，发现用Container无法改变它的大小，查看源码，发现它的宽高是有约束的，那么如何改变Switch的大小了

采用缩放的方式取改变大小

 Transform.scale(
              scale: 0.7,
              child: CupertinoSwitch(
                value: this.flag,
                activeColor: Colors.amberAccent,
                onChanged: (value){
                  setState(() {
                    this.flag = value;
                  });
                },
              ),
            )

8.如何自定义一个大小的Switch

参考文章：https://blog.csdn.net/u010212060/article/details/105156635