Element 系列組件之 ECheckbox 多選組件

介紹

「ECheckbox」 是 「Element」 系列組件中的多選框組件。

引入

1. 在 「pubspec.yaml」 中依賴(lài)

   element_ui:?^0.0.1
   

2. import

   import?'package:element_ui/widgets.dart';
   

用法

基礎(chǔ)用法，「value」 是否選中，true表示選中，false表示未選中。

ECheckbox(
??value:?false,
??label:?'復(fù)選框',
)

「border」 是否顯示邊框。

ECheckbox(
??value:?false,
??label:?'復(fù)選框',
??border:?true,
)

「onChanged」 是否選中發(fā)生變化時(shí)回調(diào)

ECheckbox(
??value:?true,
??label:?'復(fù)選框',
??onChanged:?(value){},
)

「tristate」表示有3種狀態(tài)，分別為選中、未選中、橫線。

ECheckbox(
??value:?true,
??label:?'復(fù)選框',
??tristate:?true,
)

「enable」 設(shè)置為true時(shí)，表示禁用。

ECheckbox(
??value:?false,
??label:?'禁用',
??enable:?false,
)

「style」 樣式

• 「fontColor」：字體顏色
• 「checkedFontColor」：選中字體顏色
• 「backgroundColor」：背景顏色
• 「checkedBackgroundColor」：選中背景顏色
• 「borderColor」：邊框顏色
• 「checkedBorderColor」：選中邊框顏色
• 「borderRadius」：邊框圓角半徑
• 「padding」：內(nèi)邊距
• 「space」：label與選擇框之間的距離

字體樣式

ECheckbox(
??value:?false,
??label:?'復(fù)選框',
??style:?ECheckboxStyle(
????fontColor:?Colors.red,
????checkedFontColor:?Colors.blue,
??),
)

背景樣式

ECheckbox(
??value:?false,
??label:?'復(fù)選框',
??style:?ECheckboxStyle(
????backgroundColor:?Colors.grey.withOpacity(.3),
????checkedBackgroundColor:?Colors.blue,
??),
)

邊框樣式

ECheckbox(
??value:?false,
??label:?'復(fù)選框',
??border:?true,
??style:?ECheckboxStyle(
????borderColor:?Colors.green,
????checkedBorderColor:?Colors.red,
????borderRadius:?BorderRadius.circular(10),
??),
)

設(shè)置邊距

ECheckbox(
??value:?false,
??label:?'復(fù)選框',
??border:?true,
??style:?ECheckboxStyle(
????padding:?EdgeInsets.symmetric(horizontal:?32,vertical:?24),
????space:?30
??),
)