Flutter ECheckbox 多选组件

介绍

「ECheckbox」 是 「Element」 系列组件中的多选框组件。

引入

1. 在 「pubspec.yaml」 中依赖

   element_ui: ^0.0.1
   

2. 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  ),)