dynamic - 如何做随机数的星星? (评分)

标签 dynamic widget row flutter

做一排星星作为评级是微不足道的,但我不确定做随机数的正确 flutter 方法是什么?

换句话说,假设我的评分最多为 5 颗星,我该怎么做,只有一颗或两颗星?我可以有一个 switch 语句,并返回带有一两颗星的适当行小部件,但这似乎是一种丑陋的方法。

有没有合适的 Flutter/Dart 方法来做这种事情?

(我的问题当然不仅仅是这个,我想找到做这种事情的正确的 flutter 方法)

最佳答案

通过回答这个问题:How to create rating star bar properly?

同时,我给出了一个星级评级小部件的示例,它可以与任意数量的星级(默认为 5)一起使用。

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)));
  }
}

然后你可以使用它

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),
        starCount: 2
      );
    }
  }

关于dynamic - 如何做随机数的星星? (评分),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46666829/

相关文章:

通过动态添加一些结构元素来创建结构数组

jquery - 当元素改变它的类时触发事件

javascript - 无法发送到特定房间和客户端(Socket.io 2.0.2)

magento - 什么让您对 Magento Widgets API 感到困惑?

java - 从表中选择行 - Java Selenium

database - 如何使用swift 3在核心数据中只获取一列数据

tomcat - Nginx 将每个请求转发给 apache tomcat

widget - 自动将小部件添加到我的启动器屏幕

java - 如何滚动 android 小部件中的所有 TextView ?

php - 无法使用 img PHP 从数据库中删除行