带有灵活 Spacer 的 SwiftUI VStack

Posted 2023-02-25

【中文标题】带有灵活 Spacer 的 SwiftUI VStack

【英文标题】：SwiftUI VStack with flexible Spacer

【发布时间】：2020-08-03 11:23:53

【问题描述】：

我有一个简单的VStack，顶部有一个视图，底部有一个多行文本。文本可以更新其内容，因此它会根据它的行数调整大小。发生这种情况时，顶部的视图也会调整其位置 - 向上或向下移动。

我希望顶视图保持固定的垂直位置，独立于VStack 中的以下视图。在我看来，这就是Spacer 的用途，因为它们很灵活。然而这并不奏效。

struct ContentView: View 
    var body: some View 
        VStack 
            HStack("Some Icons")
            Spacer()
            Text("Multiline Text")
        
    

【参考方案1】：

你可以用ZStack：

struct ContentView: View 
    var body: some View 
        ZStack 
            VStack 
                Text("top view")
                Spacer()
            
            VStack 
                Spacer()
                Text("bottom view")
            
        
    

这样，第一个 VStack 中的所有内容都不会相对于第二个 VStack 移动。

---

或者，您可以继续使用 VStack，但将其子视图包装在单独的 VStacks 中：

struct ContentView: View 
    var body: some View 
        VStack 
            VStack 
                Text("top view")
                Spacer()
            
            VStack 
                Spacer()
                Text("bottom view")
            
        
    

【讨论】：

谢谢，但我试过了，但它们就在彼此之上，我必须通过应用偏移来手动调整它们的位置。我想保持 VStack 的自动垂直布局。

@hoshy 那么请分享您的代码并更好地描述问题 - 包括其他视图以及当您只有两个视图时没有问题（如上例所示）。

是的，您的解决方案有效，但正如所解释的，它还将 VStack 和 Text 呈现在彼此之上。所以我必须抵消它们以使它们看起来是垂直结构的。我的问题再次是，如果有一种方法可以让 Spacer 缩小和放大视图，同时保持 HStack 固定。

@hoshy 查看更新的答案。除了Text("top view")，您还可以放置任何其他视图（例如HStack）。

有趣的是，有了两个 VStack 和内部 Spacer，您甚至不需要 ZStack，这使得布局再次完美。 （这可能会在您的答案中更新。）