美文网首页
Flutter切割Widget

Flutter切割Widget

作者: 心旷则神怡 | 来源:发表于2022-03-24 14:05 被阅读0次
    评分案例,支持传入自定义图片;

    效果图:

    效果图.png

    ———

    源码:

    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;
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter切割Widget

          本文链接:https://www.haomeiwen.com/subject/apzxjrtx.html