如何阻止 SwiftUI 视图变得比 superview 更宽

Posted 2023-02-24

【中文标题】如何阻止 SwiftUI 视图变得比 superview 更宽

【英文标题】：How to stop SwiftUI view from getting wider than superview

【发布时间】：2019-10-06 11:36:06

【问题描述】：

我创建了一个UIHostingController 来在我的应用程序中放置一个 SwiftUI 视图。根视图包含一个VStack，其中包含一些HStacks 和Pickers。选择器将视图比屏幕宽 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)

【问题讨论】：

你能附上你的代码吗？

是的，我刚刚更新了问题。

【参考方案1】：

我看不出所提供的代码有任何明显错误。您可以尝试使用GeometryReader 来强制VStack 成为可用空间的宽度。还要添加一些padding()，否则你的Text 将从边缘开始

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

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

【讨论】：

我刚刚在VStack 上尝试了GeometryReader 和.frame 修饰符。我可以在视图层次结构调试器中看到VStack 的“修改器”宽度 = 320（在右侧栏中的对象检查器中），但尺寸检查器显示宽度为 328。如果我尝试maxWidth，也是如此。

真的很奇怪。设置更大的填充会解决这个问题吗？也许.padding（20）？这不是一个解决方案，因为在这种情况下很难理解实际问题是什么，但也许它会有所帮助

【参考方案2】：

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