我们在上一章回中介绍了"网络综合示例"相关的内容，本章回中将介绍如何 自定义评分条.闲话休提，让我们一起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(),)
]),

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

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

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