当前位置:网站首页>A brief introduction to the CheckboxListTile component of the basic components of Flutter
A brief introduction to the CheckboxListTile component of the basic components of Flutter
2022-07-31 03:18:00 【A soybean】
浅识Flutter 基本组件之CheckboxListTile组件
CheckboxListTile的使用方法、功能和Checkbox差不多,But it's used more widely、设计出的UI更美观
CheckboxListTile常用属性如下表所示.
属性名 | 类型 | 功能说明 |
---|---|---|
title | widget | Set the main title component |
subtitle | Widget | Set the subtitle component |
isThreeLine | bool | Sets whether the displayed checkbox occupies three lines,默认值为false |
dense | bool | Set whether to densely display the title vertically |
secondary | widget | Set the displayed widget,与□The location is opposite |
selected | bool | When the setting is selected, the title text is highlighted,默认值为 false |
controlAffinity | ListTileControlAffinity | 设置□The position relative to the title text,取值包含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 设置□The position relative to the title text,取值包含leading(前面)、platform (后面)和trailing(后面)
/*Adjust the position of checkboxes and icons*/
controlAffinity:ListTileControlAffinity.leading ,
设置前
设置后:
创建多个CheckboxListTile
Column column = Column(
children: <Widget>[
CheckboxListTile(
value: this.isChecked,
/*Set the main title component*/
title: Text(
'全选',
style: TextStyle(color: Colors.red),
),
/*Set the subtitle component*/
subtitle: Text('Selecting all means that it is a faction of its own'),
/*Set the displayed widget,与□The location is opposite*/
secondary: Icon(Icons.flag),
/*Adjust the position of checkboxes and icons*/
controlAffinity: ListTileControlAffinity.leading,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
),
CheckboxListTile(
title: Text(select[0]),
subtitle: Text('Abortion Squad'),
secondary: Icon(Icons.info),
/*Adjust the position of checkboxes and icons*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[0],
onChanged: (value) {
setState(() {
flag[0] = value;
});
}
),
CheckboxListTile(
title: Text(select[1]),
subtitle: Text('Shilan is a tough team'),
secondary: Icon(Icons.info),
/*Adjust the position of checkboxes and icons*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[1],
onChanged: (value) {
setState(() {
flag[1] = value;
});
}
),
CheckboxListTile(
title: Text(select[2]),
subtitle: Text('Wanwan Leiqing Team'),
secondary: Icon(Icons.info),
/*Adjust the position of checkboxes and icons*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[2],
onChanged: (value) {
setState(() {
flag[2] = value;
});
}
),
],
);
Realize one key to select all or one key to cancel all selection 功能
全部代码
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,
/*Set the main title component*/
title: Text(
'全选',
style: TextStyle(color: Colors.red),
),
/*Set the subtitle component*/
subtitle: Text('Selecting all means that it is a faction of its own'),
/*Set the displayed widget,与□The location is opposite*/
secondary: Icon(Icons.flag),
/*Adjust the position of checkboxes and icons*/
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('Abortion Squad'),
secondary: Icon(Icons.info),
/*Adjust the position of checkboxes and icons*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[0],
onChanged: (value) {
setState(() {
flag[0] = value;
});
}
),
CheckboxListTile(
title: Text(select[1]),
subtitle: Text('Shilan is a tough team'),
secondary: Icon(Icons.info),
/*Adjust the position of checkboxes and icons*/
controlAffinity: ListTileControlAffinity.leading,
value: flag[1],
onChanged: (value) {
setState(() {
flag[1] = value;
});
}
),
CheckboxListTile(
title: Text(select[2]),
subtitle: Text('Wanwan Leiqing Team'),
secondary: Icon(Icons.info),
/*Adjust the position of checkboxes and icons*/
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 = "Your chosen faction is:";
for (int i = 0; i < flag.length; i++) {
if (flag[i]) {
/*if the option is checked*/
info = info + select[i] + ' ';
}
}
print(info);
},
tooltip: 'Increment',
child: Icon(Icons.save),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat, //position of the buoy
);
}
}
边栏推荐
- 【动态规划】连续子数组的最大和
- 【C语言】表达式求值的一般方法
- [Compilation principle] Lexical analysis program design principle and implementation
- 点云DBSCAN聚类(MATLAB,非内置函数)
- 【C语言】进制转换一般方法
- 【Exception】The field file exceeds its maximum permitted size of 1048576 bytes.
- LeetCode simple problem to find the subsequence of length K with the largest sum
- C# remote debugging
- Day32 LeetCode
- [Godot][GDScript] 二维洞穴地图随机生成
猜你喜欢
品牌广告投放平台的中台化应用与实践
[C language] Preprocessing operation
Mysql 45讲学习笔记(二十五)MYSQL保证高可用
VS QT - ui does not display newly added members (controls) || code is silent
Multilingual settings of php website (IP address distinguishes domestic and foreign)
Moxa NPort device flaw could expose critical infrastructure to devastating attack
C#远程调试
IIR滤波器和FIR滤波器
SIP协议标准和实现机制
11. Redis implements follow, unfollow, and follow and follower lists
随机推荐
TCP/IP four-layer model
Is interprofessional examination difficult?Low success rate of "going ashore"?Please accept this practical guide!
Recursive query single table - single table tree structure - (self-use)
选好冒烟测试用例,为进入QA的制品包把好第一道关
自己的一些思考
4. Sensitive word filtering (prefix tree)
刚出道“一战成名”,安全、舒适一个不落
[Dynamic programming] Maximum sum of consecutive subarrays
PMP WeChat group daily exercises
[Compilation principle] Lexical analysis program design principle and implementation
Detailed explanation of TCP (2)
CefSharp入门-winform
With 7 years of experience, how can functional test engineers improve their abilities step by step?
【HCIP】ISIS
Number 16, top posts
JS function this context runtime syntax parentheses array IIFE timer delay self.backup context call apply
How to develop a high-quality test case?
一份高质量的测试用例如何养成?
编译Hudi
Chapter 9 SVM Practice