Element 系列組件之 ERate 評分組件

介紹

「ERate」 組件是 「Flutter Element」 組件系列中的評分組件。

引入

1. 在 「pubspec.yaml」 中依賴

   element_ui:?^lastversion
   

   最新的版本到pub上查看，pub地址：https://pub.dev/packages/element_ui

2. import

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

用法

基礎(chǔ)用法

ERate(value:?3.7)

「value」：評分值，其大小和 **count **有關(guān)聯(lián)，**count **默認為5。

「count」: ?星星個數(shù)。

ERate(value:?5.5,count:?6,)

「showLabel」：是否顯示label。

ERate(
??value:?3.7,
??showLabel:?true,
)

「labelBuilder」：自定義lable。

ERate(
??value:?5,
??showLabel:?true,
??labelBuilder:?(double?value)?{
????String?s?=?'';
????if?(value?<=?1)?{
??????s?=?'極差';
????}?else?if?(value?<=?2)?{
??????s?=?'失望';
????}?else?if?(value?<=?3)?{
??????s?=?'一般';
????}?else?if?(value?<=?4)?{
??????s?=?'滿意';
????}?else?if?(value?<=?5)?{
??????s?=?'驚喜';
????}
????return?Text(s);
??},
)

「itemSize」：每一項的大小，默認40。

ERate(
??value:?3.7,
??itemSize:?60,
)

上邊為默認，下邊設(shè)置了60。

「iconType」：評分圖標類型。

• 「star」：星星圖標。

• 「sentiment」：情緒圖標，不同的值，圖標不同。

• 「sameSentiment」：情緒圖標，不同的值，圖標相同。

ERate(
??value:?5,
??iconType:?RateIconType.sentiment,
)

ERate(
??value:?5,
??iconType:?RateIconType.sameSentiment,
)

「space」：每一個item直接的間隔。

ERate(
??value:?3.5,
??space:?12,
)

「enable」：是否可用，設(shè)置為false時，不可改變其值。

ERate(
??value:?3.5,
??enable:?false,
)

「onChanged」: ?值發(fā)生變化時回調(diào)。

ERate(
??value:?3.5,
??onChanged:?(value){
????print('$value');
??},
)

「child」 和 「itemBuilder」 都是允許用戶自定義 item的屬性，但「itemBuilder」優(yōu)先級高于 「child」，一般情況下 「child」 用于每一個 Item 都一樣的情況， 「itemBuilder」 用于每一個 Item 都不一樣的情況。

ERate(
??value:?3.5,
??child:?SizedBox(
????width:?40,
????height:?40,
????child:?ColoredBox(
??????color:?Colors.white,
????),
??),
)

ERate(
??value:?3.5,
??itemBuilder:?(context,?index)?{
????return?Text('$index');
??},
)

自定義 Item 組件的顏色是不起作用的，改變顏色需要通過 「style」 屬性：

• 「activeColor」 : 激活狀態(tài)的顏色，默認 「Colors.amber」。
• 「inactiveColor」：未激活狀態(tài)的顏色，默認 「EleTheme」 主題中 「borderColorLighter」的顏色。

ERate(
??value:?3.5,
??style:?ERateStyle(
????activeColor:?Colors.red,
????inactiveColor:?Colors.black,
??),
)