Flutter单选开关和复选框
封面图
•
2025-10-26
•
Flutter
9
0
0
0
在 Flutter 中,`Switch`(单选开关)和 `Checkbox`(复选框)是两种常用的交互控件,用于让用户进行选择。它们分别适用于不同的场景: --- ## 一、`Switch`(单选开关) ### 1. **用途** - 表示一个**二选一**的选项(开启/关闭)。 - 通常用于切换功能状态(如:启用/禁用某个功能)。 ### 2. **代码示例** ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter Switch 示例')), body: SwitchExample(), ), ); } } class SwitchExample extends StatefulWidget { @override _SwitchExampleState createState() => _SwitchExampleState(); } class _SwitchExampleState extends State<SwitchExample> { bool _isSwitched = false; @override Widget build(BuildContext context) { return Center( child: Switch( value: _isSwitched, onChanged: (value) { setState(() { _isSwitched = value; }); }, ), ); } } ``` ### 3. **属性说明** - `value`: 当前的状态(true 或 false)。 - `onChanged`: 当用户点击开关时触发的回调函数。 --- ## 二、`Checkbox`(复选框) ### 1. **用途** - 表示一个**多选**的选项(可以选或不选)。 - 适用于需要多个选项同时选择的情况(如:兴趣爱好、权限设置等)。 ### 2. **代码示例** ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter Checkbox 示例')), body: CheckboxExample(), ), ); } } class CheckboxExample extends StatefulWidget { @override _CheckboxExampleState createState() => _CheckboxExampleState(); } class _CheckboxExampleState extends State<CheckboxExample> { bool _isChecked = false; @override Widget build(BuildContext context) { return Center( child: Checkbox( value: _isChecked, onChanged: (value) { setState(() { _isChecked = value!; }); }, ), ); } } ``` ### 3. **属性说明** - `value`: 当前是否被选中(true 或 false)。 - `onChanged`: 用户点击复选框时触发的回调函数。 --- ## 三、`Switch` vs `Checkbox` | 特性 | `Switch` | `Checkbox` | |--------------|----------------------------|-----------------------------| | 外观 | 圆形滑块(类似开关) | 方形带对勾的框 | | 用途 | 开关式选择(开/关) | 多选(选/不选) | | 是否支持文字 | 可以通过 `Text` 包裹使用 | 通常与 `Text` 一起使用 | | 状态数量 | 二选一(true/false) | 二选一(true/false) | --- ## 四、结合文本使用 你可以将 `Switch` 或 `Checkbox` 与 `Text` 结合使用,形成更友好的 UI。 ### 示例:Switch + Text ```dart Row( children: [ Text('开启通知'), Switch( value: _isSwitched, onChanged: (value) { setState(() { _isSwitched = value; }); }, ), ], ) ``` ### 示例:Checkbox + Text ```dart Row( children: [ Checkbox( value: _isChecked, onChanged: (value) { setState(() { _isChecked = value!; }); }, ), Text('我同意条款'), ], ) ``` --- ## 五、自定义样式(可选) 你可以通过 `MaterialStateProperty` 自定义颜色、形状等: ```dart Switch( value: _isSwitched, onChanged: (value) { setState(() { _isSwitched = value; }); }, activeColor: Colors.blue, // 开启时的颜色 activeTrackColor: Colors.lightBlue, // 开启时的轨道颜色 ), ``` --- 如果你有更具体的使用场景或想要实现的效果(比如列表中的多选、动态控制等),欢迎继续提问!
上一篇:
Flutter图片及ICON
下一篇:
Flutter输入框及表单
标题录入,一次不能超过6条
返回顶部
留言
留言
评论