Flutter多选按钮组件Checkbox使用方法详解

Flutter多选按钮组件Checkbox使用方法详解

Flutter 中的多选按钮组件有两种，供大家参考，具体内容如下

1. Checkbox

多选按钮，一般用来表现一些简单的信息。

常用属性如下：

(1). value  多选的值；

(2). onChanged 选择改变触发的事件；

(3). activeColor 选中时的颜色；

(4). checkColor 选中后对号的颜色；

2. CheckboxListTile

包含更多信息的多选项，提供多种配置信息的属性，可以表现更丰富的信息。

常用的属性如下：

(1). value  多选的值；

(2). onChanged 选择改变触发的事件；

(3). activeColor 选中时的颜色；

(4). title 标题；

(5). subtitle 副标题；

(6). secondary 次要的；

(7). activeColor 选中时的颜色；

(8). checkColor 选中后对号的颜色；

(9). selected 选中的时候文字颜色是否跟着改变；

3. 代码示例

import 'package:flutter/material.dart';

class CheckBoxPage extends StatefulWidget {

CheckBoxPage({Key key}) : super(key: key);

@override

_CheckBoxPageState createState() => _CheckBoxPageState();

}

class _CheckBoxPageState extends State {

var status = true;

var flag = true;

var check = true;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar:AppBar(

title: Text("多选框"),

),

body:Column(

mainAxisAlignment: MainAxisAlignment.center,

children:[

Row(

children:[

// 选中框

Checkbox(

value:this.status,

// 改变后的事件

onChanged:(value){

setState(() {

this.status = value;

});

},

// 选中后的颜色

activeColor: Colors.red,

// 选中后对号的颜色

checkColor: Colors.blue,

),

Text(this.status?"选中":"取消")

],

),

SizedBox(height:10),

// 带标题的选中框

CheckboxListTile(

value:this.flag,

// 改变后的事件

onChanged:(value){

setState(() {

this.flag = value;

});

},

title:Text("标题"),

subtitle: Text("这是副标题"),

// 选中后的颜色

activeColor: Colors.red,

// 选中的文字是否跟着高亮

selected: this.flag,

// 选中后对号的颜色

checkColor: Colors.blue,

),

SizedBox(height:10),

// 带图标和标题的选中框

CheckboxListTile(

value:this.check,

onChanged:(value){

setState(() {

this.check = value;

});

},

title:Text("标题"),

subtitle: Text("这是副标题"),

secondary: Icon(Icons.help),

activeColor: Colors.red,

selected: this.check,

checkColor: Colors.blue,

),

],

)

);

}

}

效果图如下：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。