零 使用

dependencies:
  flutter_star: $lastVersion

一、描述

目标: 使用canvas手工打造,一个完美的星星评分组件。

---->[StarScore 星星显示组件]----
[1] 比如显示4.2: 会有5颗星, 前四颗填满,后一刻填充20%
StarScore 为 Stateless组件,仅负责显示的需求

---->[CustomRating 星星评分组件]----
[2] 可指定最大值,也就是显示多少个星星
[3] 点击时会改变状态,进行评分,支持半星评分
[4] 支持评分回调

---->[Star组件]----
[5]. 可定义星星的显示进度情况 0% ~ 100 % 无死角
[6]. 可定义星星的角数
[7]. 可定义星星的颜色、大小

二 、StarScore

分数展示组件

名称类型功能备注默认
scoredouble分数-0
starStar第四点星星属性配置Star()
tailWidget尾部的组件-null
StarScore(
  score: 4.8,
  star: Star(
      fillColor: Colors.tealAccent,
      emptyColor: Colors.grey.withAlpha(88)),
  tail: Column(
    children: <Widget>[
      Text("综合评分"),
      Text("4.8"),
    ],
  ),
),


三 、CustomRating

评分组件

名称类型功能备注默认
maxint最大星星数-5
scoredouble分数-0
starStar第四点星星属性配置Star()
onRatingFluction(double)点击回调@requirednull
1.最简使用

CustomRating(onRating: (s) {
   print(s);
 }),

2.可高度定制

CustomRating(
     max: 6,
     score: 3.0,
     star: Star(
         num: 12,
         fillColor: Colors.orangeAccent,
         fat: 0.6,
         emptyColor: Colors.grey.withAlpha(88)),
    onRating: (s) {
       print(s);
     }),

四 、Star

星星组件 : 高度可定制的配置类

名称类型功能备注默认
progressdouble填充的进度0,10.0
numint星星的角数大于35
fatdouble星星的胖瘦(0,1]0.5
emptyColorColor星星的色-Colors.grey
fillColorColor星星的填充色-Colors.yellow
sizedouble星星的大小-20
1. 进度填充:progress


2. 星星的角数:num


3. 星星的胖瘦:fat


4. 星星的颜色:fillColor和emptyColor


Libraries

custom_rating
flutter_star
star
star_score