2017-10-10 58 views
1

做一排星星作为评级是微不足道的,但我不确定什么是正确的扑动方式做随机数字?如何做随机数的星星? (评级)

换句话说,我说最多5颗星的评分,我该怎么办,只有一两颗星?我可以有一个switch语句,并返回一个或两个星号的适当的行小部件,但这似乎是一个丑陋的方式来做到这一点。

是否有适当的颤振/飞镖的方式来做这种事情?

(我的问题不只是这个过程中,我想找到做这种事情的正确扑方法)

+0

我不知道怎么这个有关你的问题,但我在这里问过类似的问题,也许它会帮助你: https://开头stackoverflow.com/questions/46637566/how-to-create-rating-star-bar-properly/46645766#46645766 – aziza

+0

将看看它..... – SirPaulMuaddib

回答

1

通过回答这个问题: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 
    ); 
    } 
    }