如何在垂直 PageView 中显示图像？答案

【问题标题】：How to show image in vertical PageView?如何在垂直 PageView 中显示图像？
【发布时间】：2021-08-12 09:41:44
【问题描述】：

我想做一个垂直的图像查看器。

但是当图像大于屏幕时，图像的顶部和底部被隐藏。

于是我做了Pageview，把ListView放到了PageView中。

现在我可以向下滚动到 ListView 的末尾，但不能滚动 PageView。

我想在 Flutter 中制作“完整”的滚动视图。

如何在 Flutter 中制作滚动视图？

PageView(
                    scrollDirection: Axis.vertical,
                    pageSnapping: false,
                    onPageChanged: (index) {
                      setState(() {
                        _currentSlider = index;
                      });
                    },
                    children: file.getImages
                        .map((e) => Center(
                              child: ListView(
                                physics: ClampingScrollPhysics(),
                                children: [
                                  Image.memory(
                                    e,
                                    fit: BoxFit.fitWidth,
                                  )
                                ],
                              ),
                            ))
                        .toList(),
                  )

【问题讨论】：

你能提供你的代码吗？
@JediBurrell 好的。我更新了代码。
@pskink 是的。我已经尝试过那个解决方案。但我无法在 SingleChildScrollView 中滚动 PageView。我想平滑滚动 PageView。
对不起。它在横向模式下不起作用。我只想要垂直滚动视图。像这样。 link
不，它不起作用。我现在正在尝试this。

标签： flutter dart flutter-layout pageviews

【解决方案1】：

尝试像这样添加 SingleChildScrollView()：

PageView(
      scrollDirection: Axis.vertical,
      pageSnapping: false,
      onPageChanged: (index) {
        setState(() {
          _currentSlider = index;
        });
      },
      children: file.getImages
          .map((e) => Center(
            child: SingleChildScrollView(
              child: ListView(
                physics: ClampingScrollPhysics(),
                children: [
                  Image.memory(
                    e,
                    fit: BoxFit.fitWidth,
                  )
                ],
              ),
            ),
      ))
          .toList(),
    )

【讨论】：

如果没有 'shrinkWrap: true'，它就无法工作。使用 'shrinkWrap: true'，它的工作原理与我的示例相同。