Android Flutter实现评分组件的示例代码
前言
在很多应用中，我们都需要收集用户的评分，比如商品满意度、配送满意度、应用使用体验等等。评分组件通常会是下面这样，一般满分是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来节省我们开发的时间，而且体验也可以根据需要来定制。
到此这篇关于Android Flutter实现评分组件的示例代码的文章就介绍到这了,更多相关Android Flutter评分组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Android studio实现app登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本篇文章主要介绍了Android修改字体样式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
开发一个新项目，底部导航栏一般是首页的标配，在以前的xml布局中，我们可以很轻松的是用谷歌提供的BottomNavigationView或者自定义来实现底部导航的功能，在Compose中也有也提供了一个类似的控件androidx.compose.material.BottomNavigation2022-09-09
这篇文章主要为大家详细介绍了ViewPager实现带引导小圆点与自动跳转的引导界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
Android APK应用安装原理解析之AndroidManifest使用PackageParser.parserPac
这篇文章主要介绍了Android APK应用安装原理解析之AndroidManifest使用PackageParser.parserPackage原理,结合实例形式分析了PackageManagerService调用PackageParser.parserPackage方法解析APK清单相关原理与操作技巧,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了Android编程实现获取新浪天气预报数据的方法,涉及Android基于新浪接口的调用及数据处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了浅谈Android 指纹解锁技术,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
下面小编就为大家带来一篇Android中FontMetrics的几个属性全面讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
Android中ListView + CheckBox实现单选、多选效果
这篇文章主要介绍了Android中ListView + CheckBox实现单选、多选效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了Android 实现购物车加减功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
最新评论