群网站建设合同,国际物流网站,东营信息网招聘信息,wordpress站点标题是什么文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了网络综合示例相关的内容#xff0c;本章回中将介绍如何
自定义评分条.闲话休提#xff0c;让我们一起Talk Flutter吧。 概念介绍
我们在本章回中介绍的评分条就是包含多个星星形状的评分条#xff0… 文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了网络综合示例相关的内容本章回中将介绍如何
自定义评分条.闲话休提让我们一起Talk Flutter吧。 概念介绍
我们在本章回中介绍的评分条就是包含多个星星形状的评分条常见于网上购物后的评价中,相信大家都见过。Flutter没有提供这样的组件因此我们准备自己实现一个这样的组件本章回中将详细介绍如何去实现该组件。
实现方法
创建一个星星的Icon,在Icon中设置Icon的大小和颜色把多个Icon放到Row中形成一排星星Icon,用来表示评价总分值创建一个和步骤2中相同的星星Icon,只是颜色不同用来表示评价实际的分值使用Stack组件把步骤2和步骤3中创建星星Icon叠加在一起组成一个整体的评分条
该方法的整体思路就是使用Stack叠加两行形状相同图标图标的颜色不同进而实现显示评分值和未评分值的效果。接下来我们通过具体的代码来演示该方法。
示例代码
ListWidget ratingStar() {///用来存放已经评分的star不过需要计算ListWidget 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;
}ListWidget 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(),)
]),上面的代码和实现的方法完全相同同时还进行了扩展可以自定义评分的颜色以及评分条中的图标形状就是说可以把评分条中的星星换成其它的图形。
代码中有个细节在实现方法中没有介绍就是计算评分值它的思路使用当前用户输入的评分值除以总分值得到评分值然后用该值除以每个星星代表的分值这样就得到了星形的的数量数量为小数我们先把整数部分的星星修改成评分颜色(示例中为黄色)然后使用剪切方法对星星进行操作得到不足一个星星的大小把该大小修改成评分颜色这样便把小数部分值也体现到了评分星星上。剪切组件相关的内容我们在前面章回中介绍过这里就不详细介绍了。
看官们关于如何自定义评分条相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
