firebase - 如何使用 dart 在 Flutter 中迭代小部件

Question

我需要根据从firestore获得的值的长度来迭代一个图标

下面我评论了我需要水平迭代的组件（图标）。

    class _GetReviewsState extends State<GetReviews> {
      String _id;
      final db = Firestore.instance;
      final _formkey = GlobalKey<FormState>();
      String _review;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("All Reviews"),
            centerTitle: true,
          ),
          body: 
                ...

                    subtitle: RichText(
                        text: TextSpan(
                            text: "",
                            style: TextStyle(
                              fontSize: 16,
                              color: Colors.grey,
                            ),
                            children: [
                          WidgetSpan(
                            child: new IconTheme(
                              data: new IconThemeData(color: Colors.orange),
                              child: new Icon(Icons.star, size: 14,), // I want to iterate this "star icon" for reviews.ratings.length times
                            ),
                          ),
                        ]
                        )
                        ),


                    onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (_) =>
                                ViewParticularReview(getreview: reviews))),
                  );
                },
              );
            },
          ),
        );
      }
    }

这是当前的 UI 屏幕截图：

但是正如你所看到的，只显示了一个星图标，我想根据我从 firestore 获得的值重复星星

所以我想要类似的东西

for( var i = 0 ; i < reviews.ratings; i++ ) { 
      // print the icon horizontally
} 
``


here the `reviews.ratings` gives an `int` value from `firestore`

Can someone please help me?

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/9jp5L.png

标签： firebaseflutterdartgoogle-cloud-firestore

Answer 1

您可以使用一个集合来迭代和添加多个图标：

 Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    for( var i = 0 ; i < 10; i++ )
     new IconTheme(
          data: new IconThemeData(color: Colors.orange),
          child: new Icon(Icons.star, size: 20,), // I want to iterate this "star icon" for reviews.ratings.length times
                   ),
                ],
             ),

检查以下示例：

https://dartpad.dartlang.org/8e922854c88b6602c17d0e7e2c51b27d