美文网首页
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