Android Flutter实现评分组件的示例代码
岛上码农 人气:0前言
在很多应用中,我们都需要收集用户的评分,比如商品满意度、配送满意度、应用使用体验等等。评分组件通常会是下面这样,一般满分是5分。
不过,有时候评分组件也会有一些特殊性(都怪产品的想法太多)。比如要求支持0.5分的评分,比如对不同的满意度使用不同的图标,再比如支持滑动的时候也能评分,甚至还要竖着排……这么多诉求,自己写的话还挺麻烦,但是有一个组件轻松就能够搞定,那就是 flutter_rating_bar,下面是官方的示例,可以看到完美地满足了我们上面提到的需求。本篇我们就来看一下 flutter_rating_bar 的几个典型的应用示例
基础应用
先来看最简单的“五星好评”,这可以通过 RaingBar 实现,代码如下:
RatingBar( ratingWidget: RatingWidget( full: Icon(Icons.star, color: Colors.yellow[600]), half: Icon(Icons.star_half, color: Colors.yellow[600]), empty: Icon(Icons.star_border, color: Colors.yellow[600]), ), onRatingUpdate: (ratingValue) { setState(() { _rating = ratingValue; }); }, glowColor: Colors.yellow[600], initialRating: _initialRating, allowHalfRating: true, itemPadding: const EdgeInsets.all(2.0), ),
我们看一下上面用到的属性:
ratingWidget
:评分元素组件,可以定义满格、半格(0.5分)和空的元素,这里我们使用的常见的星星图标,实际也可以替换为图片或其他图标。onRatingUpdate
:评分变化时的回调方法;glowColor
:滑动评分时的发光效果颜色;initialRating
:默认分值;allowHalfRating
:是否支持0.5分,默认是否;itemPadding
:元素间距,可以调整间距显得更协调。
除此之外,还可以定义元素的数量,最小评分,以及通过禁用交互来实现只读效果。
不同分数的图标不同
我们可以利用 RatingBar.builder
方法来为每一个分值构建不同的图标,比如低分使用苦脸,高分使用笑脸,这种评分相比普通的星星评分来说会更有趣味性一些。假设我们的应用有吉祥物的话,可以用吉祥物的表情图片来表示不同的评分,会更有意思一些。
上面的实现代码如下,实际上就是根据不同的分值返回不同的图标组件,此外这里可以利用一个unratedColor
的属性来定义未被评分的图标颜色。
RatingBar.builder( itemBuilder: ((context, index) { switch (index) { case 0: return const Icon( Icons.sentiment_very_dissatisfied, color: Colors.red, ); case 1: return const Icon( Icons.sentiment_dissatisfied, color: Colors.redAccent, ); case 2: return const Icon( Icons.sentiment_neutral, color: Colors.amber, ); case 3: return const Icon( Icons.sentiment_satisfied, color: Colors.lightGreen, ); case 4: return const Icon( Icons.sentiment_very_satisfied, color: Colors.green, ); default: return Container(); } }), onRatingUpdate: (ratingValue) { setState(() { _rating = ratingValue; }); }, tapOnlyMode: true, glow: false, initialRating: _initialRating, unratedColor: Colors.blueGrey, itemPadding: const EdgeInsets.all(2.0), ),
小数分值
如果评分颗粒度要更精细,比如支持除了0.5以外的小数,那么可以使用 RatingBarIndicator
来搞定。需要注意的是,由于分值变成了小数,因此无法通过点击星星图标实现分值的改变,需要依赖输入框、滑块组件来修改评分。下面就是利用滑块实现了评分值的更改,可以看到RatingBarIndicator
还是很强大的,可以根据分值调整星星着色显示的比例。
RatingBarIndicator
的使用代码比较简单,如下所示。我们也可以定义每一个图标的样式,以及更改间距,但显示的分值依赖于 rating
参数来设置。
RatingBarIndicator( itemBuilder: ((context, index) => Icon( Icons.star, color: Colors.yellow[600], )), itemPadding: const EdgeInsets.all(2.0), rating: _rating, ),
总结
本篇给大家介绍了 flutter_rating_bar
评分组件,这个组件使用起来简单而且能够覆盖我们绝大部分的评分使用场景。如果应用中有类似的评分功能,可以利用flutter_rating_bar
来节省我们开发的时间,而且体验也可以根据需要来定制。
加载全部内容