# Flutter星级评选,星级,星级排行

星级评选,星级,星级排行

一个豆瓣的星级评选,效果图和原图如下

img

自己做的效果.png

img

豆瓣评分效果.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

img

CustomClipper.png

CustomClipper 又是一个抽象类,所以我们看看实现过他的子类都是什么东西。一看就发现,有两个是锁着的(

相关文章

这篇文章主要讲解了“FlutterComponent动画的显和隐怎么实现...
这篇文章主要讲解了“flutter微信聊天输入框功能如何实现”,...
本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有...
这篇文章主要介绍“Flutter怎么使用Android原生播放器”,在...
Flutter开发的android端如何修改APP名称,logo,版本号,具体...
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.Mater...