Flutter Ui 实验室（四）星级评分

QQ群里有人问下面这种星级评分怎么做？

image.png

关键就是使用 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)

效果如下：

image.png

最后全部代码如下：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grade Star'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Row(
              children: _getGradeStar(4.5, 5)
            )
          ],
        ),
      ),
    );
  }
}