flutter 星级评分

关键就是使用 Stack和ClipRect配合来显示

1. 使用Stack来重叠显示背后的灰色星和前面的红色星
2. 使用ClipRect来全部或部分显示前面的红色星

Stack(children: <Widget>[// 显示背后的灰色星Icon(Icons.star,color: Colors.grey,),// 显示前面的红色星ClipRect(child: Align(alignment: Alignment.topLeft,widthFactor: 0.5, //从左上角开始计算，显示一半的红色星child: Icon(Icons.star,color: Colors.redAccent,),))],)

定义一个函数，根据总分和当前得分返回评分图形

List<Widget> _getGradeStar(double score, int total)

效果如下：

最后全部代码如下：

import 'package:flutter/material.dart';class GradeStart extends StatelessWidget {List<Widget> _getGradeStar(double score, int total) {List<Widget> _list = List<Widget>();for (var i = 0; i < total; i++) {double factor = (score - i);if (factor >= 1) {factor = 1.0;}else if (factor < 0){factor = 0;}Stack _st = Stack(children: <Widget>[Icon(Icons.star,color: Colors.grey,),ClipRect(child: Align(alignment: Alignment.topLeft,widthFactor: factor,child: Icon(Icons.star,color: Colors.redAccent,),))],);_list.add(_st);}return _list;}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Grade Star'),),body: Container(child: Column(children: <Widget>[Row(children: _getGradeStar(4.5, 5))],),),);}
}

原文地址：https://www.jianshu.com/p/b5e867095871