VStack 不填充 ScrollView 中的屏幕宽度，填充 List答案

【问题标题】：VStack not filling screen width in ScrollView, does fill in ListVStack 不填充 ScrollView 中的屏幕宽度，填充 List
【发布时间】：2019-06-09 13:54:57
【问题描述】：

我创建了一个可滚动的图像列表，如下所示：

NavigationView {
    List {
        ForEach(landmarks) { landmark in
            landmark.image(forSize: 200)
              // some modifiers...
    }
    .navigationBarTitle(Text(category.rawValue))
}

这是这段代码产生的 UI：

现在，我想去掉 List 创建的行分隔符。因此，我将List 替换为ScrollView。这就是预览显示的内容：

我该如何解决这个问题？

我见过this other similar question，但接受的答案实际上并没有解决问题，而是引入了固定宽度。

【问题讨论】：

你在滚动视图上试过.relativeWidth(<#T##proportion: Length##Length#>)吗？你没有发布你的代码，所以很难判断它是否会起作用。

标签： swift swiftui

【解决方案1】：

找到完整的SwiftUI 解决方案。

var body: some View {
    GeometryReader { geometry in
        ScrollView(alwaysBounceVertical: true) {
            VStack {
                // Your code
            }.frame(width: geometry.size.width)
        }
    }.edgesIgnoringSafeArea(.all)
}

【讨论】：

省略.edgesIgnoringSafeArea(.all) 使其成为一个很好的解决方案。虽然我不确定为什么会这样。这个解决方案看起来也不应该像这样实现。
关键是GeometryReader 避免使用UIKit。
有什么理由避免使用 UIKit？
对 UIKit 的依赖
有没有办法在不使用 UIImage 的情况下加载带有数据的图像？ @FlorentMorin

【解决方案2】：

我遇到了同样的问题，显然滚动视图使用了尽可能小的尺寸。

您可以将 .frame 修饰符添加到堆栈内的内容中，并将其宽度声明为屏幕的宽度，如下所示：

ContentInsideScrollView { ... }.frame(width: UIScreen.main.bounds.width)

注意填充，您的滚动视图可能会超出屏幕的宽度。

否则，您可以将行设置为无限宽：

.frame(minWidth: 0, maxWidth: .infinity)

无论哪种方式，您都必须使用 .frame 修饰符

【讨论】：

该值是可绑定的，还是在旋转设备时会中断？
我真的不知道，很多API还有待发布。你必须做你的测试。但我认为，当您旋转设备时，应该重绘视图，以便您获得新值
没错，我主要是在寻找“未来的读者”。关于检查填充的附加点也是一个很好的。使用屏幕宽度可能会与 iPhone X 上横向模式下的 safeAreaInsets 发生冲突（这可能是也可能不是有意为 scrollView 设计的）。
嗯，这对我来说根本不会影响滚动视图的布局......我必须将 ForEach 包装在 VStack 中，然后将 .frame(width: UIScreen...) 部分应用于该部分，而不是ScrollView 本身。