从Firestore中将list <string>检索到抖动页面

时间:2020-04-18 15:08:11

标签: flutter dart google-cloud-firestore

我想将Cloud Firestore中存在的图像中显示的详细信息显示到“电影放映”页面,但不知道如何从Firestore中检索List以及如何在代码中实现的自定义卡中显示该细节。 我尝试了其他方法,但未成功。 有人可以帮助实现上述内容吗? 这是我的第一个问题,对此深表歉意。

    class CustomCard extends StatelessWidget {
      CustomCard(
          {@required this.movie_name,
          this.genre,
          this.famous_cast,
          this.rating,
          this.comment,
          this.free_link});

      final movie_name;
      final genre;
      final famous_cast;
      final rating;
      final comment;
      final free_link;

      @override
      Widget build(BuildContext context) {
        return Card(
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0),
            child: Column(
              children: <Widget>[
                Text(movie_name),
                Text(genre),
                Text(famous_cast),
                Text(rating),
                Text(comment),
                Text(free_link),
              ],
            ),
          ),
        );
      }
    }

    class ShowPage extends StatefulWidget {
      @override
      _ShowPageState createState() => _ShowPageState();
    }

    class _ShowPageState extends State<ShowPage> {
      final db = Firestore.instance.collection('Movies');

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          resizeToAvoidBottomPadding: false,
          appBar: AppBar(
            title: Text('Show Movies'),
            backgroundColor: Colors.blueGrey[900],
          ),
          backgroundColor: Colors.white,
          body: Container(
            padding: const EdgeInsets.all(20.0),
            child: StreamBuilder<QuerySnapshot>(
              stream: db.snapshots(),
              builder:
                  (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
                switch (snapshot.connectionState) {
                  case ConnectionState.waiting:
                    return new Text('Loading.....');
                  default:
                    return new ListView(children: getExpenseItems(snapshot));
                }
              },
            ),
          ),
        );
      }

      getExpenseItems(AsyncSnapshot<QuerySnapshot> snapshot) {
        return snapshot.data.documents
            .map(
              (doc) => new CustomCard(
                movie_name: new Text(doc["movie_n"]),
                genre: new Text(doc["genre"]),
                famous_cast: new Text(doc["famous_c"]),
                rating: new Text(doc["rating"].toString()),
                comment: new Text(doc["comments"]),
                free_link: new Text(doc["free_link"]),
              ),
            )
            .toList();
      }
    }

1 个答案:

答案 0 :(得分:0)

由于我不确定CustomCard的期望是什么,因此我假设它是List<Widget>,所以您可能想要执行以下操作。

class CustomCard extends StatelessWidget {
  CustomCard(
      {@required this.movie_name,
      this.genres,
      this.famous_casts,
      this.rating,
      this.comment,
      this.free_link});

  final movie_name;
  final List<Object> genres;
  final List<Object> famous_casts;
  final rating;
  final comment;
  final free_link;

  @override
  Widget build(BuildContext context) {
   return Card(
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0),
        child: Column(
          children: <Widget>[
            Text(movie_name),
            ...genres
                .map(
                  (genre) => Text(genre + ', '),
                )
                .toList(),
            ...famous_casts
                .map(
                  (famous_cast) => Text(famous_cast + ', '),
                )
                .toList(),
            Text(rating),
            Text(comment),
            Text(free_link),
          ],
        ),
      ),
    );
  }
}

getExpenseItems(AsyncSnapshot<QuerySnapshot> snapshot) {
        return snapshot.data.documents
            .map(
              (doc) =>  CustomCard(
                movie_name:  doc["movie_n"],
                genres:  doc["genre"],
                famous_casts:  doc["famous_c"],
                rating:  doc["rating"].toString(),
                comment: doc["comments"],
                free_link:  doc["free_link"],
              ),
            )
            .toList();
      }

尝试一下