第九十七回 自定义评分条

我们在上一章回中介绍了"网络综合示例"相关的内容，本章回中将介绍如何 自定义评分条.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中介绍的评分条就是包含多个星星形状的评分条，常见于网上购物后的评价中,相信大家都见过。Flutter没有提供这样的组件，因此我们准备自己实现一个这样的组件，本章回中将详细介绍如何去实现该组件。

实现方法

1. 创建一个星星的Icon,在Icon中设置Icon的大小和颜色；
2. 把多个Icon放到Row中，形成一排星星Icon,用来表示评价总分值；
3. 创建一个和步骤2中相同的星星Icon,只是颜色不同，用来表示评价实际的分值；
4. 使用Stack组件把步骤2和步骤3中创建星星Icon叠加在一起，组成一个整体的评分条；

该方法的整体思路就是使用Stack叠加两行形状相同图标，图标的颜色不同，进而实现显示评分值和未评分值的效果。接下来我们通过具体的代码来演示该方法。

示例代码

List<Widget> ratingStar() {
  ///用来存放已经评分的star，不过需要计算
  List<Widget> allStars = [];
  ///使用参数中传入的图标，如果没有传入使用默认的star图标
  var star = Icon(widget.ratingedWidget.icon,
      color: widget.ratingedColor,
      size: widget.sizeOfStar,
  );


  ///计算单个star占用的分数
  double ratingPerStar = widget.maxRating / widget.countOfStar;
  ///计算star的数量，分整个star和部分star,整个star的数量=当前评分/单个star的分数，向下取整
  int fullStarCount = (widget.rating/ratingPerStar).floor();
  ///如果整个star的数量超过评分条中图标的最大数量，那么将它设置为最大值
  if(fullStarCount > widget.countOfStar) {
    fullStarCount = widget.countOfStar;
  }

  double percentStarCount = (widget.rating/ratingPerStar)-fullStarCount;
  // print("per: $ratingPerStar, full: $fullStarCount , part: $percentStarCount");

  ///把整数个star放入数组
  for(var i =0; i <fullStarCount;i++) {
    allStars.add(star);
  }

  var percentStar = ClipRect(
    clipper: DIYCliper(percent: percentStarCount),
    child: star,
  );
  allStars.add(percentStar);

  return allStars;
}

List<Widget> unRatingStar() {
  return List.generate(widget.countOfStar, (index) {

    ///使用参数中传入的图标，如果没有传入使用默认的star图标
    return Icon(
      widget.unRtingedWidget.icon,
      color: widget.unRatingedColor,
      size: widget.sizeOfStar,
    );
  });
}

Stack(children: [
  Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: unRatingStar(),
  ),
  Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: ratingStar(),
  )
]),

上面的代码和实现的方法完全相同，同时还进行了扩展：可以自定义评分的颜色以及评分条中的图标形状，就是说可以把评分条中的星星换成其它的图形。

代码中有个细节在实现方法中没有介绍，就是计算评分值，它的思路：使用当前用户输入的评分值除以总分值得到评分值，然后用该值除以每个星星代表的分值，这样就得到了星形的的数量，数量为小数，我们先把整数部分的星星修改成评分颜色(示例中为黄色)，然后使用剪切方法对星星进行操作，得到不足一个星星的大小，把该大小修改成评分颜色，这样便把小数部分值也体现到了评分星星上。剪切组件相关的内容，我们在前面章回中介绍过，这里就不详细介绍了。

看官们，关于"如何自定义评分条"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!