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

Question

我有一个包含视频缩略图的网格视图。现在这个缩略图列表是从流中生成的。我需要的是，当用户点击任何图像时，特定视频应该在网页浏览中打开。我已经实现了这一点，但是在网页浏览中打开的视频没有听任何更改。

我不确定是否可以在 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 内。不过，在这种情况下，我不想将 pageview 放在 streambuider 中。

下面的屏幕截图更好地想象它。

Answer 1

我认为您需要使用StreamProvider。并将其放在您的 MaterialApp 上方 main 中，这样即使您使用 Navigator 也可以访问它的 Stream。

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

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