Flutter-五角星评分组件

评分展示： 我们需要根据不同的评分显示不同的星级展示，这里我封装了一个XFStarRating的小Widget来实现；

1.XFStarRating效果展示

目的：实现功能展示的同时，提供高度的定制效果

• rating：必传参数，告诉Widget当前的评分。
• maxRating：可选参数，最高评分，根据它来计算一个比例，默认值为10；
• size：星星的大小，决定每一个star的大小；
• unselectedColor：未选中星星的颜色（该属性是使用默认的star才有效）；
• selectedColor：选中星星的颜色（该属性也是使用默认的star才有效）；
• unselectedImage：定制未选中的star；
• selectedImage：定义选中时的star；
• count：展示星星的个数；

暂时实现上面的定制，后续有新的需求继续添加新的功能点~

image.png

2. 实现思路分析

理清楚思路后，你会发现并不是非常复杂，主要就是两点的展示：

• 未选中star的展示：根据个数和传入的unselectedImage创建对应个数的Widget即可；
• 选中star的展示：
  • 计算出满star的个数，创建对应的Widget；
  • 计算剩余比例的评分，对最后一个Widget进行裁剪；

问题一：选择StatelessWidget还是StatefulWidget？
考虑到后面可能会做用户点击进行评分或者用户手指滑动评分的效果，所以这里选择StatefulWidget

• 目前还没有添加这个功能

问题二：如何让选中的star和未选中的star重叠显示？

• 非常简单，使用Stack即可；

child: Stack(
        children: <Widget>[
          Row(children: getUnselectImage(), mainAxisSize: MainAxisSize.min,),
          Row(children: getSelectImage(), mainAxisSize: MainAxisSize.min,),
        ],
      ),

问题三：如何实现对选中的最后一个star进行裁剪？

• 可以使用ClipRect定制CustomClipper进行裁剪

定义CustomClipper裁剪规则：

class MyRectClipper extends CustomClipper<Rect> {
  final double width;

  MyRectClipper({this.width});

  @override
  Rect getClip(Size size) {
    return Rect.fromLTRB(0, 0, width, size.height);
  }

  @override
  bool shouldReclip(MyRectClipper oldClipper) {
    return width != oldClipper.width;
  }
}

使用MyRectClipper进行裁剪：

ClipRect(
      clipper: MyRectClipper(width: leftRatio*widget.size),
      child: widget.selectedImage,
    );

3.XFStarRating代码实现

import 'package:flutter/material.dart';

class XFStarRating extends StatefulWidget {

  final double rating;
  final double maxRating;
  final Widget unselectedImage;
  final Widget selectedImage;
  final int    count;
  final double size;
  final Color  unselectedColor;
  final Color  selectedColor;

 XFStarRating({
   @required this.rating,
   this.maxRating = 10,
   this.size = 20,
   this.unselectedColor = const Color(0xffbbbbbb),
   this.selectedColor = const Color(0xffe0aa46),
   Widget unselectedImage,
   Widget selectedImage,
   this.count = 5,
}):unselectedImage = unselectedImage ?? Icon(Icons.star,size: size,color: unselectedColor,),
  selectedImage = selectedImage ?? Icon(Icons.star,size: size,color: selectedColor,);

  @override
  _XFStarRatingState createState() => _XFStarRatingState();
}

class _XFStarRatingState extends State<XFStarRating> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: <Widget>[
          Row(children: getUnselectImage(), mainAxisSize: MainAxisSize.min,),
          Row(children: getSelectImage(), mainAxisSize: MainAxisSize.min,),
        ],
      ),
    );
  }


  List<Widget> getUnselectImage() {
    return List.generate(widget.count, (index) {
      return widget.unselectedImage;
    });
  }

  List<Widget> getSelectImage() {
    //1.计算Star个数和剩余比例等
    double oneVale = widget.maxRating / widget.count;
    int entireCount = (widget.rating / oneVale).floor();
    double leftValue = widget.rating - entireCount * oneVale;
    double leftRatio = leftValue / oneVale;

    //2.获取Star
    List<Widget> selectedImages = [];
    for (int i = 0; i < entireCount; i++) {
      selectedImages.add(widget.selectedImage);
    }

    //3.计算
    Widget leftStar = ClipRect(
      clipper: MyRectClipper(width: leftRatio*widget.size),
      child: widget.selectedImage,
    );
    selectedImages.add(leftStar);
    return selectedImages;
  }

}

class MyRectClipper extends CustomClipper<Rect> {
  final double width;

  MyRectClipper({this.width});

  @override
  Rect getClip(Size size) {
    return Rect.fromLTRB(0, 0, width, size.height);
  }

  @override
  bool shouldReclip(MyRectClipper oldClipper) {
    return width != oldClipper.width;
  }
}

使用代码：

 XFStarRating(rating: 3.6,maxRating: 5,size: 40,selectedColor: Colors.red,unselectedColor: Colors.grey,),

学习内容来自Flutter从入门到实战