如何防止SwiftUI视图超出父视图的宽度？

Question

我创建了一个UIHostingController来将SwiftUI视图放入我的应用程序中。根视图包含一个VStack，里面有一些HStack和Picker。选择器将视图向右推出屏幕8个点。它看起来很糟糕-文本略微偏离屏幕。通常我会使用自动布局约束来将视图的左右边缘固定到父视图上，优先级为1000（必需的）来解决这个问题。在SwiftUI中等价于什么？

触发问题的一些简化代码

struct EditSegmentView: View {

    @State var seconds: Int = 10

    var body: some View {
        VStack {
            HStack {
                Text("Pause after intro")
                Spacer()
                Text("10 seconds")
            }
            Picker(selection: $seconds, label: Text("Seconds")) {
                ForEach(0..<60) { n in
                    Text("\(n) sec").tag(n)
                }
            }
        }
    }
}

这是从一个UIViewController中显示的，如下所示：

let editView = EditSegmentView()
let vc = UIHostingController(rootView: editView)
vc.modalPresentationStyle = .fullScreen
present(vc, animated: true)

- Rob N

---

请问您能否包含您的代码？ - LuLuGaGa

是的，我刚刚更新了问题。 - Rob N

Answer 1

这有点晚了，但我遇到了同样的问题，通过确保外部VStack的对齐方式设置为.leading来解决了。内部的VStack也有alignment：leading，然后在内部的VStack上添加了.padding()。

- Jesse Naugher

Answer 2

我看不出提供的代码有明显的问题。您可以尝试使用GeometryReader来强制VStack占用可用空间的宽度。另外，添加一些padding()，否则您的Text将从边缘开始。

var body: some View {
    GeometryReader { proxy in
        VStack {
            //...
        }   .padding()
            .frame(width: proxy.size.width)
    }
}

有没有线索可以解释为什么在调试视图层次结构时，视图扩展到了边缘之外？

- LuLuGaGa

---

我刚刚尝试了GeometryReader和VStack上的.frame修饰符。我可以在视图层次结构调试器中看到，VStack具有“修改器”宽度= 320（在右侧边栏的对象检查器中），但大小检查器显示宽度为328。如果我尝试maxWidth也是同样的情况。 - Rob N

这真的很奇怪。设置更大的填充是否可以解决这个问题？也许 .padding(20)？这并不是一个真正的解决方案，因为在这种情况下很难理解实际的问题是什么，但也许会有所帮助。 - LuLuGaGa