星级评选,星级,星级排行
自己做的效果.png
豆瓣评分效果.png
一、开发步骤
首先,明确一下如何来设计这个东西。
评分系统,一看图上就有两种不同的星星,一个表层的带颜色的星星,一个底层的灰色星星。
底层的灰色星星,都是满星,而表层的带颜色的星星,有半颗的。
这时候我们就知道了,要做一个层叠在一起的两组星星,一组底层的灰色满的,一组表层的可能不是满的。
1.创建一个底层用的空的星星,或者灰色的星星 (☆)
2.创建一排底层用的星星(☆☆☆☆☆)
3.创建一个表层用的满的带颜色的星星(★)
4.创建半个表层用的带颜色的星星(★半颗)
5.将他们叠在一起
二、开始开发
现在开始开发
- 创建一个底层用的空的星星,或者灰色的星星 (☆)
Icon unSelectedStar = Icon(Icons.star_border, color: Colors.red, size: 30);
- 创建一排 5个 底层用的星星(☆☆☆☆☆)
List.generate(5, (index) {
return Icon(Icons.star_border, color: Colors.red, size: 30);
})
- 创建一个表层用的满的带颜色的星星(★)
Icon(Icons.star, color: Colors.red, size: 30);
- 创建半个表层用的带颜色的星星(★半颗)
半颗星星需要用到剪切,剪切这里,我们需要用到一个东西ClipRect
,
ClipRect(
clipper: StarCustomClipper(leftWidth),
child: star,
);
clipper` 我们看到要传一个 `CustomClipper
CustomClipper.png
CustomClipper
又是一个抽象类,所以我们看看实现过他的子类都是什么东西。一看就发现,有两个是锁着的(