评分案例,支持传入自定义图片;
效果图:

———
源码:
import 'package:flutter/material.dart';
class StarRating extends StatefulWidget {
final double rating; //得分
final double maxRating;//总分
final int count;//星星个数
final double size;//星星大小
final Color unselectedColor;//未选中星星的颜色
final Color selectedColor;//选中颜色
final Widget selectImage;//如果是自定义图片则设置该属性,选中图片
final Widget unSelectImage;//如果是自定义图片则设置该属性,未选中图片,配合选中图片使用
StarRating({
required this.rating,
this.maxRating=10,//总分默认十分
this.count = 5,//星星默认5个
this.size = 30,
this.unselectedColor = Colors.grey,
this.selectedColor = Colors.red,
Widget? selectImage,
Widget? unSelectImage,
}): selectImage = selectImage ?? Icon(Icons.star, color: selectedColor, size: size,),
unSelectImage = unSelectImage ?? Icon(Icons.star_border, color: unselectedColor, size: size,);//仿造flutter官方写法初始化
@override
_StarRatingState createState() => _StarRatingState();
}
class _StarRatingState extends State<StarRating> {
@override
Widget build(BuildContext context) {
return Center(
child: Stack(//绝对布局
children: [
Row(mainAxisSize: MainAxisSize.min, children: buildUnSelectColor(),),//下面盖一层未选中的星星
Row(mainAxisSize: MainAxisSize.min, children: buildSelectColor(),)//上面是已选中的星星
],
),
);
}
List<Widget> buildUnSelectColor() {
return List.generate(widget.count, (index) {
return widget.unSelectImage;
});
}
List<Widget> buildSelectColor() {
final star = widget.selectImage;
//创建stars
List<Widget> stars = [];
//构建满的star
double value = widget.maxRating / widget.count;//一个占据的分数
int entireCount = (widget.rating / value).floor();//向下取整
for(int i = 0; i < entireCount; i++){
stars.add(star);
}
double leftWidth = ((widget.rating / value) - entireCount) * widget.size; //不足一个剩下的部分
//构建部分的star
final clipStar = ClipRect(
child: star,
clipper: StarCliper(width: leftWidth),
);
stars.add(clipStar);
return stars;
}
}
class StarCliper extends CustomClipper<Rect> {
double width;
StarCliper({required this.width});
@override
Rect getClip(Size size) {
// TODO: implement getClip
return Rect.fromLTRB(0, 0, width, size.height);//切割
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) {
// TODO: implement shouldReclip
return false;
}
}
网友评论