前言
Flutter是谷歌的移動UI框架吧彪，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面浊吏。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯拐叉！熱門的框架千篇一律，好用輪子萬里挑一吩坝！Flutter作為這兩年開始崛起的跨平臺開發(fā)框架，其第三方生態(tài)相比其他成熟框架還略有不足哑蔫，但輪子的數(shù)量也已經(jīng)很多了钉寝。本系列文章挑選日常app開發(fā)常用的輪子分享出來，給大家提高搬磚效率闸迷，同時也希望flutter的生態(tài)越來越完善嵌纲，輪子越來越多。
本系列文章準(zhǔn)備了超過50個輪子推薦腥沽，工作原因逮走，盡量每1-2天出一篇文章。
tip:本系列文章合適已有部分flutter基礎(chǔ)的開發(fā)者今阳，入門請戳：flutter官網(wǎng)
正文
輪子
- 輪子名稱：flutter_rating_bar
- 輪子概述：flutter可自定義的評分組件.
- 輪子作者：sarbagya.me
- 推薦指數(shù)：★★★★
- 常用指數(shù)：★★★
-
效果預(yù)覽：
效果圖
安裝
dependencies:
flutter_rating_bar: ^3.0.0
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
使用方法
默認(rèn)效果：
RatingBar(
initialRating: rate1, //初始評分 double
allowHalfRating: true,//允許0.5評分
itemCount: 5,//評分組件個數(shù)
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
setState(() {
this.rate1=rating;
});
},
)
自定義評分樣式：
RatingBar(
initialRating: rate2,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
ratingWidget: RatingWidget(//自定義評分組件
full: Image.asset('assets/heart.png',color: Colors.amber,),
half: Image.asset('assets/heart_half.png',color: Colors.amber,),
empty: Image.asset('assets/heart_border.png',color: Colors.amber,),
),
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
onRatingUpdate: (rating) {
setState(() {
this.rate2=rating;
});
},
),
使用index控制樣式：
RatingBar(
initialRating: rate3,
itemCount: 5,
itemBuilder: (context, index) {
switch (index) {
case 0:
return Icon(
Icons.sentiment_very_dissatisfied,
color: Colors.red,
);
case 1:
return Icon(
Icons.sentiment_dissatisfied,
color: Colors.redAccent,
);
case 2:
return Icon(
Icons.sentiment_neutral,
color: Colors.amber,
);
case 3:
return Icon(
Icons.sentiment_satisfied,
color: Colors.lightGreen,
);
case 4:
return Icon(
Icons.sentiment_very_satisfied,
color: Colors.green,
);
}
},
onRatingUpdate: (rating) {
setState(() {
this.rate3=rating;
});
},
),
豎方向：
RatingBar(
initialRating: rate4,
direction: Axis.vertical,//豎方向
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
setState(() {
this.rate4=rating;
});
},
),
