如何在 SwiftUI 中正确排列 Stack 中的元素

Posted 2023-03-17

【中文标题】如何在 SwiftUI 中正确排列 Stack 中的元素

【英文标题】：How to properly arrange elements in a Stack in SwiftUI

【发布时间】：2021-05-02 12:22:33

【问题描述】：

我是 SwiftUI 和 ios 的新手，所以这可能是一个愚蠢的问题，但我无法在任何地方得到这个问题的答案。

这是我的代码

struct ContentView: View 
    var body: some View 
        VStack(alignment: .leading, spacing: 12) 
            Text("Hey there")
            Text("How are you ?")
        
        .frame(width: 300, height: 300)
    

这是我的输出

如何将这两个文本移动到这个 300x300 框 (Vstack) 中的任何位置？ 如何将distribution 属性设置为堆栈（在UIKit 中，distribution 属性在垂直堆栈的情况下沿水平方向对齐元素，反之亦然）。 这里我给出了.leading 属性，但是为什么它不粘在这个框的左边（Vstack），而是给出这个结果

【参考方案1】：

要使它们粘在左侧，请将您的代码嵌入到 HStack 中，如下所示：

HStack 
    your code
    Spacer()

要将 em 移动到框中的任何位置，请使用 .padding(), .padding(.top, x) 将它们向下移动 x； .padding(.bottom, x) 将它们向上移动 x。类似地，.leading 将 em 向右移动， .trailing 向左移动。 在 VStack 的末尾使用 Spacer() 将所有内容移动到顶部，并在它的开头将 em 移动到底部；在 HStack 中，顶部的 Spacer() 将它们向右移动，底部将 em 向左移动。您可以设置 Spacer(minLength: x) 来设置间隔的最小长度。 (V/H)Stack(spacing: y) 设置该 VStack 或 HStack 中每个视图之间的空间。 ZStack 用于将 View 放在另一个之上：

ZStack 
    Text("Hi")
    Text("Bye")

这把再见放在你好！

【讨论】：

嘿，谢谢你的回答，你能回答我的第三个问题吗？为什么它不粘在左边，而是在给定.leading 属性时显示如上图所示的输出。而且每次都添加.padding 似乎有点麻烦，而且容易出错，还有其他更好的方法吗？

当你指定对齐到 .leading 时，元素被放在左边但仍然出现在中间，因为 VStack 只占用它需要的空间。