Flutter——Checkbox组件、CheckboxListTile(多选框组件)
时间:2019-12-11
本文章向大家介绍Flutter——Checkbox组件、CheckboxListTile(多选框组件),主要包括Flutter——Checkbox组件、CheckboxListTile(多选框组件)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
-
Checkbox组件
Checkbox组件常用的属性:
属性 | 描述 |
value |
true 或者 false
|
onChanged
|
改变的时候触发的事件
|
activeColor
|
选中的颜色、背景颜色
|
checkColor
|
选中的颜色、Checkbox 里面对号的颜色
|
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: "CheckBox", home: MyApp(), )); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { var flag = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("CheckBox")), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Checkbox( value: this.flag, onChanged: (value) { setState(() { this.flag = value; }); }, activeColor: Colors.red, checkColor: Colors.blue, ) ], ), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text(this.flag ? "选中" : "未选中") ], ) ], ), ); } }
-
CheckboxListTile组件
属性 | 描述 |
value
|
true 或者 false
|
onChanged
|
改变的时候触发的事件
|
activeColor
|
选中的颜色、背景颜色
|
title
|
标题
|
subtitle
|
二级标题
|
secondary
|
配置图标或者图片
|
selected
|
选中的时候文字颜色是否跟着改变
|
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: "CheckboxListTile", home: MyApp(), )); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { var flag = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("CheckboxListTile")), body: CheckboxListTile( value: this.flag, title: Text("标题"), subtitle: Text("这是二级标题"), secondary: Icon(Icons.headset_mic), selected: this.flag, onChanged: (value) { setState(() { this.flag = value; }); }, ), ); } }
原文地址:https://www.cnblogs.com/chichung/p/12020981.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP rand() 函数随机整数。
- PHP使用htmlspecialchars方法实现像ASP的Server.HTMLEncode一样的效果
- jquery.ajax()怎么把获取来的内容转为JSON,并使用。
- Spring:IOC 控制反转
- Spring:AOP 面向切面编程
- JavaScript进阶教程(5)-一文让你搞懂作用域链和闭包
- JavaScript进阶教程(6)—硬核动图让你轻松弄懂递归与深浅拷贝
- Spring:JDBC Template,声明式事务
- Spring:讲解编程题
- SpringMVC:基本应用
- SpringMVC:进阶
- SpringMVC:SSM 整合
- 12 | Tornado源码分析:BaseIOStream 对象(上)
- 数据一致性校验及数据同步,运维必看
- Windows使用scoop包管理器安装RabbitMQ