Flutter Streambuilder在gridview builder和pageview中两次使用

时间:2020-06-30 15:10:04

标签: flutter stream snapshot stream-builder flutter-pageview

我有一个gridview,其中包含视频的缩略图。现在,此缩略图列表是从流中生成的。我需要的是,当用户点击任意图像时,特定视频应在综合浏览量中打开。我已经实现了这一点,但随后在网页浏览中打开的视频无法收听任何更改。

我不确定我是否可以在gridview和pageview中使用相同的流。

这是我的一些代码:

    StreamBuilder(
                            stream: Firestore.instance
                                .collection("videos")
                                .where("userKey", isEqualTo: userKey)
                                .where("isActive", isEqualTo: true)
                                .snapshots(),
                            builder:
                                (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                              if (snapshot.hasData) {
                                videos = snapshot.data.documents
                                    .map((doc) =>
                                        Video.fromMap(doc.data, doc.documentID))
                                    .toList();
                                return videos != null && videos.length > 0
                                    ? Stack(
                                        children: <Widget>[
                                          GridView.builder(
                                            gridDelegate:
                                                SliverGridDelegateWithFixedCrossAxisCount(
                                                    childAspectRatio:
                                                        MediaQuery.of(context)
                                                                .size
                                                                .width /
                                                            (MediaQuery.of(context)
                                                                    .size
                                                                    .height /
                                                                1.4),
                                                    crossAxisCount: 3),
                                            itemCount: videos.length,
    //                                    padding: EdgeInsets.all(8.0),
                                            itemBuilder:
                                                (BuildContext context, int index) {
                                              return Padding(
                                                  padding:
                                                      const EdgeInsets.all(1.0),
                                                  child: GestureDetector(
                                                    onLongPress: () {
                                                      Get.defaultDialog(
                                                          title: "Delete Video ?",
                                                          onConfirm: () async {
                                                            await DeleteVideo(
                                                                videos[index].id);
                                                            Get.back();
                                                          },
                                                          textConfirm: "Yes",
                                                          textCancel: "No",
                                                          confirmTextColor:
                                                              Colors.white,
                                                          cancelTextColor:
                                                              Colors.black,
                                                          buttonColor: Colors.red
                                                              .withOpacity(0.7),
                                                          backgroundColor:
                                                              Colors.white,
                                                          middleText:
                                                              "Do you want to delete this video ?");
                                                    },
                                                    onTap: () {
_pageController =
                                                      PageController(
                                                          initialPage: index);
                                                  currentlyPlayingVideoKey =
                                                      videos[index].id;
                                                  Get.dialog(
                                                      setupAlertDialoadContainer());

// opens a complete new window for each video
                                                      //Get.to(ProfileSingleVideo(
                                                          //videoKey:
                                                              //videos[index].id,
                                                          //goBackForMusic: true));
                                                    },



  Widget setupAlertDialoadContainer(String page) {
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
        ),
        context: context,
        isScrollControlled: true,
        builder: (context) => Container(
              child: new PageView.builder(
                  controller: _pageController,
                  itemCount: videos.length,
                  scrollDirection: Axis.vertical,
                  pageSnapping: true,
                  reverse: false,
                  onPageChanged: (page) {
                    setState(() {
                      currentlyPlayingVideoKey = videos[page].id;
                    });
                  },
                  itemBuilder: (context, position) {
                    return pageViewContent(video: videos[position]);
                  }),
            ));
  }
}

同样,我能够在综合浏览量中打开视频,然后跳到想要点击的视频。但是,该视频无法收听在网页浏览器中打开视频时所做的更改。例如。喜欢该视频并不会增加其计数器,尽管喜欢在将网页浏览量直接置于Streambuilder内部的其他屏幕中也可以使用。不过,在这种情况下,我不想将综合浏览量放置在streambuider中。

下面的屏幕快照可以更好地想象它。

enter image description here

1 个答案:

答案 0 :(得分:0)

我认为您需要使用StreamProvider。并将其放置在main中的MaterialApp上方,以便即使在使用导航器时也可以访问其Stream。

然后可以将PageView设置为StreamProvider的使用者。通过将其包装在Consumer Widget中。

我希望这可以解决您的页面视图无法收听更改的问题。