如何正确创建评分星条?

如何正确创建评分星条?,第1张

如何正确创建评分星条?

太多重复和填充!h

无论如何,这就是我要做的。简单,可重用。您可以在没有点击的情况下使用它(没有点击会禁用波纹效果)。也是半颗星。如果未指定颜色,则对填充的星星使用原色

typedef void RatingChangeCallback(double rating);class StarRating extends StatelessWidget {  final int starCount;  final double rating;  final RatingChangeCallback onRatingChanged;  final Color color;  StarRating({this.starCount = 5, this.rating = .0, this.onRatingChanged, this.color});  Widget buildStar(BuildContext context, int index) {    Icon icon;    if (index >= rating) {      icon = new Icon(        Icons.star_border,        color: Theme.of(context).buttonColor,      );    }    else if (index > rating - 1 && index < rating) {      icon = new Icon(        Icons.star_half,        color: color ?? Theme.of(context).primaryColor,      );    } else {      icon = new Icon(        Icons.star,        color: color ?? Theme.of(context).primaryColor,      );    }    return new InkResponse(      onTap: onRatingChanged == null ? null : () => onRatingChanged(index + 1.0),      child: icon,    );  }  @override  Widget build(BuildContext context) {    return new Row(children: new List.generate(starCount, (index) => buildStar(context, index)));  }}

You can then use it like this :

class Test extends StatefulWidget {  @override  _TestState createState() => new _TestState();}class _TestState extends State<Test> {  double rating = 3.5;  @override  Widget build(BuildContext context) {    return new StarRating(      rating: rating,      onRatingChanged: (rating) => setState(() => this.rating = rating),    );  }}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/4974849.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-14
下一篇 2022-11-14

发表评论

登录后才能评论

评论列表(0条)

保存