当前位置:网站首页>浅识Flutter 基本组件之CheckboxListTile组件
浅识Flutter 基本组件之CheckboxListTile组件
2022-07-31 03:12:00 【阿大豆】
浅识Flutter 基本组件之CheckboxListTile组件
CheckboxListTile的使用方法、功能和Checkbox差不多,但是它的使用范围更广、设计出的UI更美观
CheckboxListTile常用属性如下表所示。
属性名 | 类型 | 功能说明 |
---|---|---|
title | widget | 设置主标题组件 |
subtitle | Widget | 设置副标题组件 |
isThreeLine | bool | 设置显示的复选框是否占三行,默认值为false |
dense | bool | 设置是否垂直密集显示标题 |
secondary | widget | 设置显示的小组件,与□所在位置相反 |
selected | bool | 设置选中后标题文字高亮,默认值为 false |
controlAffinity | ListTileControlAffinity | 设置□相对于标题文字的位置,取值包含leading(前面)、platform (后面)和trailing(后面) |
CheckboxListTile的属性值
const CheckboxListTile({
Key? key,
required this.value,
required this.onChanged,
this.activeColor,
this.checkColor,
this.tileColor,
this.title,
this.subtitle,
this.isThreeLine = false,
this.dense,
this.secondary,
this.selected = false,
this.controlAffinity = ListTileControlAffinity.platform,
this.autofocus = false,
this.contentPadding,
this.tristate = false,
this.shape,
this.selectedTileColor,
this.visualDensity,
this.focusNode,
this.enableFeedback,
}) : assert(tristate != null),
assert(tristate || value != null),
assert(isThreeLine != null),
assert(!isThreeLine || subtitle != null),
assert(selected != null),
assert(controlAffinity != null),
assert(autofocus != null),
super(key: key);
必须要有value,onChanged
CheckboxListTile(onChanged: (bool? value) {
}, value:false,),
controlAffinity 设置□相对于标题文字的位置,取值包含leading(前面)、platform (后面)和trailing(后面)
/*调整复选框和图标的位置*/
controlAffinity:ListTileControlAffinity.leading ,
设置前
设置后:
创建多个CheckboxListTile
Column column = Column(
children: <Widget>[
CheckboxListTile(
value: this.isChecked,
/*设置主标题组件*/
title: Text(
'全选',
style: TextStyle(color: Colors.red),
),
/*设置副标题组件*/
subtitle: Text('全选表示自成一派'),
/*设置显示的小组件,与□所在位置相反*/
secondary: Icon(Icons.flag),
/*调整复选框和图标的位置*/
controlAffinity: ListTileControlAffinity.leading,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
),
CheckboxListTile(
title: Text(select[0]),
subtitle: Text('堕胎小分队'),
secondary: Icon(Icons.info),
/*调整复选框和图标的位置*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[0],
onChanged: (value) {
setState(() {
flag[0] = value;
});
}
),
CheckboxListTile(
title: Text(select[1]),
subtitle: Text('世兰好苦队'),
secondary: Icon(Icons.info),
/*调整复选框和图标的位置*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[1],
onChanged: (value) {
setState(() {
flag[1] = value;
});
}
),
CheckboxListTile(
title: Text(select[2]),
subtitle: Text('莞莞类卿队'),
secondary: Icon(Icons.info),
/*调整复选框和图标的位置*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[2],
onChanged: (value) {
setState(() {
flag[2] = value;
});
}
),
],
);
实现一键全选或一键取消全选 功能
全部代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class zhucepage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MyState();
}
}
class MyState extends State {
List flag = [false, false, false];
List select = ['皇后', '华妃', '甄嬛'];
bool isChecked = false;
@override
Widget build(BuildContext context) {
Row row = Row(
children: <Widget>[
Text('选择你的阵营: '),
Text(select[0]),
Checkbox(
value: flag[0],
onChanged: (value) {
//setState更新值
setState(() {
flag[0] = value!;
});
},
),
Text(select[1]),
Checkbox(
value: flag[1],
onChanged: (value) {
//setState更新值
setState(() {
flag[1] = value!;
});
},
),
Text(select[2]),
Checkbox(
value: flag[2],
onChanged: (value) {
//setState更新值
setState(() {
flag[2] = value!;
});
},
),
],
);
/*创建多个CheckboxListTile*/
Column column = Column(
children: <Widget>[
CheckboxListTile(
value: this.isChecked,
/*设置主标题组件*/
title: Text(
'全选',
style: TextStyle(color: Colors.red),
),
/*设置副标题组件*/
subtitle: Text('全选表示自成一派'),
/*设置显示的小组件,与□所在位置相反*/
secondary: Icon(Icons.flag),
/*调整复选框和图标的位置*/
controlAffinity: ListTileControlAffinity.leading,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
for(int i=0;i<flag.length;i++){
flag[i]=isChecked;
}
});
},
),
CheckboxListTile(
title: Text(select[0]),
subtitle: Text('堕胎小分队'),
secondary: Icon(Icons.info),
/*调整复选框和图标的位置*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[0],
onChanged: (value) {
setState(() {
flag[0] = value;
});
}
),
CheckboxListTile(
title: Text(select[1]),
subtitle: Text('世兰好苦队'),
secondary: Icon(Icons.info),
/*调整复选框和图标的位置*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[1],
onChanged: (value) {
setState(() {
flag[1] = value;
});
}
),
CheckboxListTile(
title: Text(select[2]),
subtitle: Text('莞莞类卿队'),
secondary: Icon(Icons.info),
/*调整复选框和图标的位置*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[2],
onChanged: (value) {
setState(() {
flag[2] = value;
});
}
),
],
);
return Scaffold(
appBar: AppBar(
title: Text('用户注册'),
centerTitle: true,
),
body: column,
floatingActionButton: FloatingActionButton(
onPressed: () {
String info = "你选择的阵营是:";
for (int i = 0; i < flag.length; i++) {
if (flag[i]) {
/*如果选项被选中*/
info = info + select[i] + ' ';
}
}
print(info);
},
tooltip: 'Increment',
child: Icon(Icons.save),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat, //浮标的位置
);
}
}
边栏推荐
- 测试中的误报和漏报同样的值得反复修正
- 什么是分布式锁?实现分布式锁的三种方式
- IIR滤波器和FIR滤波器
- [C language foundation] Solve C language error: expected ';', ',' or ')' before '&' token
- 解析小结—自用
- Moxa NPort device flaw could expose critical infrastructure to devastating attack
- TCP详解(三)
- 8. Unified exception handling (controller notifies @ControllerAdvice global configuration class, @ExceptionHandler handles exceptions uniformly)
- TCP详解(二)
- 【C语言】求两个整数m和n的最大公因数和最小公倍数之和一般方法,经典解法
猜你喜欢
Office automation case: how to automatically generate period data?
[Compilation principle] Lexical analysis program design principle and implementation
The use of font compression artifact font-spider
Use of QML
Recursive query single table - single table tree structure - (self-use)
Ambiguous method call.both
LeetCode简单题之两个数组间的距离值
[Dynamic programming] Maximum sum of consecutive subarrays
Is interprofessional examination difficult?Low success rate of "going ashore"?Please accept this practical guide!
【C语言】进制转换一般方法
随机推荐
Number 16, top posts
【Exception】The field file exceeds its maximum permitted size of 1048576 bytes.
return in try-catch
10 Permission introduction
递归查询单表-单表树结构-(自用)
Chapter 9 SVM Practice
Detailed explanation of TCP (3)
15. Website Statistics
观察者模式
TCP详解(二)
【C语言】三子棋(经典解法+一览图)
YOLOV5 study notes (3) - detailed explanation of network module
Several common errors when using MP
接口测试关键技术
【C语言】求两个整数m和n的最大公因数和最小公倍数之和一般方法,经典解法
CloudCompare&PCL 计算两个点云之间的重叠度
BUG definition of SonarQube
下载jar包的好地方
[C language] Preprocessing operation
品牌广告投放平台的中台化应用与实践