本文正在参与「金石计划 . 分割6万现金大奖」

前语

在很多运用中，咱们都需求搜集用户的评分，比方商品满意度、配送满意度、运用运用体验等等。评分组件通常会是下面这样，一般满分是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来节省咱们开发的时刻，并且体验也能够依据需求来定制。

本篇源码已上传至：有用组件相关代码。

我是岛上码农，微信公众号同名。如有问题能够加自己微信沟通，微信号：island-coder。

：觉得有收成请点个赞鼓舞一下！

：保藏文章，便利回看哦！

：评论沟通，互相前进！

本文正在参与「金石计划 . 分割6万现金大奖」