flutter好用的轮子推荐十六-flutter可自定义的评分组件

前言

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。

本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网

正文

轮子

  • 轮子名称:flutter_rating_bar
  • 轮子概述:flutter可自定义的评分组件.
  • 轮子作者:sarbagya.me
  • 推荐指数:★★★★
  • 常用指数:★★★
  • 效果预览:
    效果图

安装

1
2
dependencies:
flutter_rating_bar: ^3.0.0
1
import 'package:flutter_rating_bar/flutter_rating_bar.dart';

使用方法

默认效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
RatingBar(
initialRating: rate1, //初始评分 double
allowHalfRating: true,//允许0.5评分
itemCount: 5,//评分组件个数
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
setState(() {
this.rate1=rating;
});
},
)

自定义评分样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
RatingBar(
initialRating: rate2,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
ratingWidget: RatingWidget(//自定义评分组件
full: Image.asset('assets/heart.png',color: Colors.amber,),
half: Image.asset('assets/heart_half.png',color: Colors.amber,),
empty: Image.asset('assets/heart_border.png',color: Colors.amber,),
),
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
onRatingUpdate: (rating) {
setState(() {
this.rate2=rating;
});
},
),

使用index控制样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
RatingBar(
initialRating: rate3,
itemCount: 5,
itemBuilder: (context, index) {
switch (index) {
case 0:
return Icon(
Icons.sentiment_very_dissatisfied,
color: Colors.red,
);
case 1:
return Icon(
Icons.sentiment_dissatisfied,
color: Colors.redAccent,
);
case 2:
return Icon(
Icons.sentiment_neutral,
color: Colors.amber,
);
case 3:
return Icon(
Icons.sentiment_satisfied,
color: Colors.lightGreen,
);
case 4:
return Icon(
Icons.sentiment_very_satisfied,
color: Colors.green,
);
}
},
onRatingUpdate: (rating) {
setState(() {
this.rate3=rating;
});
},
),

竖方向:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
RatingBar(
initialRating: rate4,
direction: Axis.vertical,//竖方向
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
setState(() {
this.rate4=rating;
});
},
),

结尾

文章作者: 小包子
文章链接: http://www.xbzweb.com/2019/11/18/flutter好用的轮子推荐十六-flutter可自定义的评分组件/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小包子的博客
承接软件开发外包:网站开发、iOS开发、Android开发、微信小程序、桌面软件开发,效率高,价格优。点击进入小包子工作室