Flutter开发App的未来及其在各行业的应用潜力分析
1373
2022-12-16
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小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~