使用 SwiftUI 调整宽度/水平对齐

Question

我在 SwiftUI 中实现了以下布局：

VStack {
  TextField(...)
  TextField(...)
  Button(...)
}

我试着让我的 VStack 成为父视图的 50%，所以我添加了以下修饰符：

VStack { ... }
  .relativeWidth(0.5)

不是超级视图的 50%，但我对实现水平居中更感兴趣。有人知道如何在 SwiftUI 中实现吗？

有一个可用的 alignmentGuide(_:computeValue:) 修饰符，但我正在努力提供正确的输入以满足编译器的要求。

Answer 1

我会使用一些垫片和 HStack ...

struct LoginView: View {

    @State var myText: String = ""

    var body: some View {
        HStack {
            Spacer()
            VStack {
                TextField($myText, placeholder: Text("Email"))
                    .textFieldStyle(.roundedBorder)
                    .textContentType(.username)

                TextField($myText, placeholder: Text("Password"))
                    .textFieldStyle(.roundedBorder)
                    .textContentType(.password)

                Button(action: {
                    // Do your login thing here
                }) {
                    Text("Login")
                }
            }
             Spacer()
        }
    }
}

Answer 2

它似乎已经居中对齐了。 让 HStack 知道要占用多少宽度 就可以完美地完成这项工作。以上代码由 @SMP 修改后 没有间隔符 看起来像这样：

struct LoginView : View {
    @State var myText: String = ""

    var body: some View {
        HStack {
            VStack {
                TextField($myText, placeholder: Text("Email"))
                    .textFieldStyle(.roundedBorder)
                    .textContentType(.username)
                TextField($myText, placeholder: Text("Password"))
                    .textFieldStyle(.roundedBorder)
                    .textContentType(.password)
                Button(action: {
                    // Do your login thing here
                }) {
                    Text("Login")
                }
            }
            .relativeWidth(0.7)
        }
        .relativeWidth(1)
    }
}

使用 SwiftUI 调整宽度/水平对齐

Adjusting width / horizontalAlignment with SwiftUI

swift

swiftui