Flutter Widget 之 flutter_rating_bar
你若尝试过从头开始执行评分条控制项RatingBar，可能得要一番功夫
下次不妨试试flutter_rating_bar
首先初始化RatingBar并设定最小与最大值和一个备选的initialRating
RatingBar( minRating: 1, maxRating: 5, initialRating: 3, ) 复制代码
你可以利用allowHalfRating来启用半分评价
RatingBar( minRating: 1, maxRating: 5, initialRating: 3, allowHalgRating: true, ) 复制代码
最后加个onRatingUpdate,以便于评分更新时触发此回调
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外观
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, ) 复制代码
反之，若要禁用拖动输入,则可将tapOnlyMode设置为true
RatingBar( minRating: 1, maxRating: 5, initialRating: 3, allowHalfRating: true, onRatingUpdate: _saveRating, ratingWidget: RatingWidget(...), tapOnleMode: true, ) 复制代码
最后，若需完全禁用手势输入，可切换的属性为ignoreGestures
RatingBar( minRating: 1, maxRating: 5, initialRating: 3, allowHalfRating: true, onRatingUpdate: _saveRating, ratingWidget: RatingWidget(...), ignoreGestures: true, ) 复制代码
如果想了解有关flutter_rating_bar的内容，或者关于Flutter的其他功能
作者：程序员界的小学生
链接：https://juejin.cn/post/7170590815587139614