Element 系列組件之 ERadioGroup 單選組件

介紹

「ERadioGroup」 是 「Element」 系列組件中的單選組件。

引入

1. 在 「pubspec.yaml」 中依賴

   element_ui:?^0.0.1
   

2. import

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

用法

基礎(chǔ)用法

ERadioGroup(
??radios:?[
????ERadioItem(
??????value:?'1',
??????label:?'備選項(xiàng)',
????),
????ERadioItem(
??????value:?'2',
??????label:?'備選項(xiàng)',
????),
??],
)

禁用選項(xiàng)

ERadioGroup(
??radios:?[
????ERadioItem(
??????value:?'1',
??????label:?'禁用',
??????enable:?false,
????),
????ERadioItem(
??????value:?'2',
??????label:?'備選項(xiàng)',
????),
??],
)

「onChanged」 當(dāng)值發(fā)生變化時觸發(fā)

ERadioGroup(
??selectValue:?'1',
??onChanged:?(value)?{
????print('ERadioGroup?onChanged?value:$value');
??},
??radios:?[
????ERadioItem(
??????value:?'1',
??????label:?'備選項(xiàng)1',
????),
????ERadioItem(
??????value:?'2',
??????label:?'備選項(xiàng)2',
????),
??],
)

「selectValue」 默認(rèn)選中值

ERadioGroup(
??selectValue:?'1',
??radios:?[
????ERadioItem(
??????value:?'1',
??????label:?'備選項(xiàng)1',
????),
????ERadioItem(
??????value:?'2',
??????label:?'備選項(xiàng)2',
????),
????ERadioItem(
??????value:?'3',
??????label:?'備選項(xiàng)3',
????)
??],
),

按鈕樣式單選

ERadioButtonGroup(
??style:?ERadioStyle(
??????padding:
??????????EdgeInsets.symmetric(horizontal:?24,?vertical:?12)),
??radios:?[
????ERadioItem(
??????value:?'1',
??????label:?'北京',
????),
????ERadioItem(
??????value:?'2',
??????label:?'上海',
????),
????ERadioItem(
??????value:?'3',
??????label:?'廣州',
????),
????ERadioItem(
??????value:?'4',
??????label:?'深圳',
????),
??],
)

「border」 是否顯示邊框

ERadioGroup(
??border:?true,
??radios:?[
????ERadioItem(
??????value:?'1',
??????label:?'備選項(xiàng)1',
????),
????ERadioItem(
??????value:?'2',
??????label:?'備選項(xiàng)2',
????),
??],
)

「style」 樣式屬性

• 「fontColor」：字體顏色
• 「checkedFontColor」：選中字體顏色
• 「backgroundColor」：背景顏色
• 「checkedBackgroundColor」：選中背景顏色
• 「borderColor」：邊框顏色
• 「checkedBorderColor」：選中邊框顏色
• 「borderRadius」：邊框圓角
• 「padding」：每一個選項(xiàng)padding
• 「space」：兩個選項(xiàng)選項(xiàng)間的間距

字體樣式

ERadioGroup(
??style:?ERadioStyle(
????fontColor:?Colors.black,
????checkedFontColor:?Colors.red
??),
??radios:?[
????ERadioItem(
??????value:?'1',
??????label:?'備選項(xiàng)1',
????),
????ERadioItem(
??????value:?'2',
??????label:?'備選項(xiàng)2',
????),
??],
),

背景樣式

ERadioGroup(
??style:?ERadioStyle(
??????backgroundColor:?Colors.grey.withOpacity(.5),
??????checkedBackgroundColor:?Colors.red,
??????checkedFontColor:?Colors.white),
??radios:?[
????ERadioItem(
??????value:?'1',
??????label:?'備選項(xiàng)1',
????),
????ERadioItem(
??????value:?'2',
??????label:?'備選項(xiàng)2',
????),
??],
)

邊框樣式

ERadioGroup(
??style:?ERadioStyle(
????borderColor:?Colors.grey.withOpacity(.3),
????checkedBorderColor:?Colors.red,
????borderRadius:?BorderRadius.all(Radius.circular(3))
??),
??border:?true,
??radios:?[
????ERadioItem(
??????value:?'1',
??????label:?'備選項(xiàng)1',
????),
????ERadioItem(
??????value:?'2',
??????label:?'備選項(xiàng)2',
????),
??],
)