介绍
「ECheckbox」 是 「Element」 系列组件中的多选框组件。
引入
在 「pubspec.yaml」 中依赖
代码语言:javascript复制element_ui: ^0.0.1
import
代码语言:javascript复制import 'package:element_ui/widgets.dart';
用法
基础用法,「value」 是否选中,true表示选中,false表示未选中。
代码语言:javascript复制ECheckbox(
value: false,
label: '复选框',
)
「border」 是否显示边框。
代码语言:javascript复制ECheckbox(
value: false,
label: '复选框',
border: true,
)
「onChanged」 是否选中发生变化时回调
代码语言:javascript复制ECheckbox(
value: true,
label: '复选框',
onChanged: (value){},
)
「tristate」表示有3种状态,分别为选中、未选中、横线。
代码语言:javascript复制ECheckbox(
value: true,
label: '复选框',
tristate: true,
)
「enable」 设置为true时,表示禁用。
代码语言:javascript复制ECheckbox(
value: false,
label: '禁用',
enable: false,
)
「style」 样式
- 「fontColor」:字体颜色
- 「checkedFontColor」:选中字体颜色
- 「backgroundColor」:背景颜色
- 「checkedBackgroundColor」:选中背景颜色
- 「borderColor」:边框颜色
- 「checkedBorderColor」:选中边框颜色
- 「borderRadius」:边框圆角半径
- 「padding」:内边距
- 「space」:label与选择框之间的距离
字体样式
代码语言:javascript复制ECheckbox(
value: false,
label: '复选框',
style: ECheckboxStyle(
fontColor: Colors.red,
checkedFontColor: Colors.blue,
),
)
背景样式
代码语言:javascript复制ECheckbox(
value: false,
label: '复选框',
style: ECheckboxStyle(
backgroundColor: Colors.grey.withOpacity(.3),
checkedBackgroundColor: Colors.blue,
),
)
边框样式
代码语言:javascript复制ECheckbox(
value: false,
label: '复选框',
border: true,
style: ECheckboxStyle(
borderColor: Colors.green,
checkedBorderColor: Colors.red,
borderRadius: BorderRadius.circular(10),
),
)
设置边距
代码语言:javascript复制ECheckbox(
value: false,
label: '复选框',
border: true,
style: ECheckboxStyle(
padding: EdgeInsets.symmetric(horizontal: 32,vertical: 24),
space: 30
),
)