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