动态类型：如果需要，使用 ScrollView 而不是 Spacers

Question

我的 HStack 中的内容比可用空间窄，并使用 Spacers 来填充整个宽度。但是，由于动态字体大小，内容可能会变得太大，并且需要 ScrollView 而不是 Spacers。但间隔符在滚动视图中不起作用。

带有简单文本的示例。文本不应换行或缩写。

import SwiftUI

struct ScrollViewSandbox: View {
    var body: some View {
//        ScrollView(.horizontal) {
            HStack {
                Text("Hello, World!")
                Spacer()
                Text("Hello,")
                Spacer()
                Text("World!")
            }.lineLimit(1)
//        }
    }
}

#Preview {
    ScrollViewSandbox()
}

在默认字体大小下，一切都很好：

在某些时候，由于内容太宽，需要 ScrollView 而不是 Spacers：

ScrollView 使文本再次可读，但随后 Spacers 不再起作用，并且所有内容都保持对齐：

我可以使用GeometryReader设置HStack minWidth并解决上述问题。但是，当在（垂直）ScrollView 中使用时，这会导致 GeometryReader 的内容收缩到错误的高度，从而导致重叠。

示例

import SwiftUI

struct ScrollViewSandbox: View {
    var body: some View {
        ScrollView {
            GeometryReader { prox in
                ScrollView(.horizontal) {
                    HStack(spacing: 20) {
                        VStack {
                            Text("Line 1")
                            Text("Line 2")
                        }
                        Spacer()
                        VStack {
                            Text("Line 1")
                            Text("Line 2")
                        }
                        Spacer()
                        VStack {
                            Text("Line 1")
                            Text("Line 2")
                        }
                    }.frame(minWidth: prox.size.width)
                }
            }
            Text("Another line")
        }
    }
}

#Preview {
    ScrollViewSandbox()
}

看起来怎么样

所以总的来说，只要内容比可用空间窄，我就想使用 Spacers，如果内容比可用空间大，我想使用 ScrollView。我如何存档该行为？

Answer 1

水平

ScrollView

的原始问题是通过将其嵌套在

GeometryReader

中解决的，按照如何使HStack填充其父视图的宽度（滚动视图）的答案（这是我的答案）。

新问题是

GeometryReader

的高度不对。通常，

GeometryReader

是贪婪的，会使用所有可用空间，但由于您已将其嵌套在另一个

ScrollView

中（这次是垂直滚动的），因此它会收缩到最小。这就是为什么最后一个

Text

与

HStack

的内容重叠。

这个新问题可以通过使用隐藏内容建立

HStack

的足迹来解决。然后，

GeometryReader

可以显示在该隐藏内容的叠加层中。

struct ScrollViewSandbox: View {
    
    private var footprint: some View {
        VStack {
            Text(".")
            Text(".")
        }
        .frame(maxWidth: .infinity)
        .hidden()
    }
    
    var body: some View {
        ScrollView {
            footprint
                .background(.yellow)
                .overlay {
                    GeometryReader { prox in
                        ScrollView(.horizontal) {
                            HStack(spacing: 20) {
                                VStack {
                                    Text("Line 1")
                                    Text("Line 2")
                                }
                                Spacer()
                                VStack {
                                    Text("Line 1")
                                    Text("Line 2")
                                }
                                Spacer()
                                VStack {
                                    Text("Line 1")
                                    Text("Line 2")
                                }
                            }
                            .frame(minWidth: prox.size.width)
                        }
                    }
                }
            Text("Another line")
        }
    }
}

[

在此示例中，足迹由两行虚拟文本组成。这足以确定主要内容的高度。如果主要内容不太可预测，那么您始终可以通过复制主要内容来构建足迹。