Flutter Widget 之 flutter_rating_bar

你若尝试过从头开始执行评分条控制项RatingBar，可能得要一番功夫

首先初始化RatingBar并设定最小与最大值和一个备选的initialRating

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,
) 

你可以利用allowHalfRating来启用半分评价

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,allowHalgRating: true,
) 

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,alloqHalfRating: true,onRatingUpdate: _saveRating,
) 

可利用评分的小部件属性来指定评级指标,无论是心形、星星、马蹄形、三叶草还是蓝月，只要是小部件就可以使用

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,allowHalfRating: true,onRatingUpdate: _saveRating,ratingWidget: RatingWidget(full: Icon(Icons.star,color: Colors.amber,),half: HalfFilledIcon(),empty: Icon(Icons.star,color: Colors.grey,),),
) 

这样用户便能触控拖拽来调整评分,记得RatingBar默认先试试五级指标.

因此若满级分高于五，请务必为就itemCount来相应地调整其属性

RatingBar(minRating: 1,maxRating: 8,initialRating: 3,allowHalfRating: true,onRatingUpdate: _saveRating,ratingWidget: RatingWidget(...),itemCount: 8,
) 

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,allowHalfRating: true,onRatingUpdate: _saveRating,ratingWidget: RatingWidget(...),itemSize: 48,itemPadding: EdgeInsets.symmetric(horizoontal: 4.0)
) 

RatingBar默认方向是水平的，但如果垂直评级更适合的话,那么也可尝试调整direction属性

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,allowHalfRating: true,onRatingUpdate: _saveRating,ratingWidget: RatingWidget(...),direction: Axis.vertical,
) 

RatingBar还自带发光效果

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,allowHalfRating: true,onRatingUpdate: _saveRating,ratingWidget: RatingWidget(...),glowColor: Colors.lightGreen,glowRadius: 5,
) 

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,allowHalfRating: true,onRatingUpdate: _saveRating,ratingWidget: RatingWidget(...),glow: false,
) 

若需要在用户拖拽评分条时回调onRatingUpdate，updateDrag所属布尔值设为true

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,allowHalfRating: true,onRatingUpdate: _saveRating,ratingWidgett: RatingWidget(...),updateDrag: true,
) 

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,allowHalfRating: true,onRatingUpdate: _saveRating,ratingWidget: RatingWidget(...),tapOnleMode: true,
) 

RatingBar(minRating: 1,maxRating: 5,initialRating: 3,allowHalfRating: true,onRatingUpdate: _saveRating,ratingWidget: RatingWidget(...),ignoreGestures: true,
) 

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享