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的其他功能,请访问flutter.dev
原文翻译自视频:视频地址
转载自:https://juejin.cn/post/7170590815587139614