一统天下 flutter - widget 选择类: Checkbox - 复选框
一统天下 flutter - widget 选择类: Checkbox - 复选框
示例如下:
lib\widget\selection\checkbox.dart
/*
* Checkbox - 复选框
*
* 注:Checkbox 必须放到一个 Material 组件内,否则会报错
*/
import 'package:flutter/material.dart';
class CheckboxDemo extends StatefulWidget {
const CheckboxDemo({Key? key}) : super(key: key);
@override
_CheckboxDemoState createState() => _CheckboxDemoState();
}
class _CheckboxDemoState extends State<CheckboxDemo> {
bool? _checkbox1IsChecked;
bool _checkbox2IsChecked = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("title")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Checkbox(
/// 当前复选框的选中状态
/// 如果 tristate 为 true 则复选框有 3 种状态,分别是 null, false, true
/// 如果 tristate 为 false 则复选框有 2 种状态,分别是 false, true
value: _checkbox1IsChecked,
tristate: true,
/// 当前复选框的选中状态发生变化时触发的事件
/// value - 变化后的状态
onChanged: (bool? value) {
setState(() {
_checkbox1IsChecked = value;
});
},
/// 复选框内的“对钩”或“横线”的颜色
checkColor: Colors.white,
/// 为不同的状态设置不同的颜色
fillColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return Colors.green; /// 选中状态为绿色
}
return Colors.red; /// 其他状态为红色
}),
/// 边框
shape: const StadiumBorder(),
),
Checkbox(
tristate: false,
value: _checkbox2IsChecked,
onChanged: (bool? value) {
setState(() {
_checkbox2IsChecked = value!;
});
},
checkColor: Colors.white,
fillColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return Colors.green;
}
return Colors.red;
}),
),
],
),
);
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
2012-03-22 稳扎稳打Silverlight(67) - 5.0被信任的应用程序之访问本地文件系统, 支持多窗口, 被信任的程序在浏览器中运行, Call Windows API