如图所示:
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;
});
})
],
));
}
}