当前位置:网站首页>浅识Flutter 基本组件之CheckBox组件
浅识Flutter 基本组件之CheckBox组件
2022-07-31 03:12:00 【阿大豆】
浅识Flutter 基本组件之CheckBox组件
常用属性如下表所示
属性名 | 类型 | 功能说明 |
---|---|---|
value | bool | 设置复选框是否选中,取值包括true(选中) 、 false (没选中) |
onChanged | 设置监听复选框的值发生改变时回调 | |
tristate | bool | 设置复选框是否三态,取值包括true、false和 null |
activeColor | Color | 设置复选框选中时的颜色 |
checkColor | Color | 设置复选框选中时选中图标()的颜色 |
materialTapTargetSize | double | 设置点击目标的大小,取值默包括 padded、shrink Wrap两种 |
Checkbox(value: flag,onChanged: (value){
//setState更新值
setState(() {
flag=value!;
});
},) ,
选中后
实现横排多个选项
body: 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!;
});
},
),
],
),
选择选项后,将选择的对象打印出来
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),
),
完整代码:
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=['皇后','华妃','甄嬛'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('用户注册'),
centerTitle: true,
),
body: 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!;
});
},
),
],
),
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.endTop, //浮标的位置
);
}
}
边栏推荐
- VS QT——ui不显示新添加成员(控件)||代码无提示
- Select the smoke test case, and make the first pass for the product package entering QA
- TCP详解(一)
- 6. Display comments and replies
- 数据库实现分布式锁
- Project (5) - Small target detection tph-yolov5
- 下载jar包的好地方
- 想从手工测试转岗自动化测试,需要学习哪些技能?
- The use of font compression artifact font-spider
- 11. Redis implements follow, unfollow, and follow and follower lists
猜你喜欢
CefSharp入门-winform
C#远程调试
加密公司向盗窃的黑客提供报价:保留一点,把剩下的归还
Use of QML
Is interprofessional examination difficult?Low success rate of "going ashore"?Please accept this practical guide!
华为分布式存储FusionStorage知识点总结【面试篇】
C# remote debugging
SQL injection Less54 (limited number of SQL injection + union injection)
QML的使用
VS QT——ui不显示新添加成员(控件)||代码无提示
随机推荐
JS function this context runtime syntax parentheses array IIFE timer delay self.backup context call apply
SocialFi 何以成就 Web3 去中心化社交未来
Local area network computer hardware information collection tool
【C语言】进制转换一般方法
Several common errors when using MP
VS QT——ui不显示新添加成员(控件)||代码无提示
IDEA 注释报红解决
return in try-catch
web容器及IIS --- 中间件渗透方法1
els block to the left to move the conditional judgment
TCP/IP four-layer model
[Compilation principle] Lexical analysis program design principle and implementation
SIP协议标准和实现机制
【HCIP】ISIS
Atomic operation CAS
Difference between unallocated blocks and unused blocks in database files
Day32 LeetCode
【CocosCreator 3.5】CocosCreator get network status
解析小结—自用
els 方块向右移