我正在尝试完成这个布局
如果我尝试用 VStack 包装 HStack，我会得到：
如果我尝试用 HStack 包装 VStack，我会得到：
有没有办法将文本与文本字段进行基线对齐，并获得从最长标签到对齐文本字段开头的标准间距？
【问题讨论】：
VStack 中的 HStack 以获得您想要的对齐方式。
看起来这会起作用：
extension HorizontalAlignment {
private enum MyAlignment: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> Length {
context[.trailing]
}
}
static let myAlignmentGuide = HorizontalAlignment(MyAlignment.self)
}
struct ContentView : View {
@State var username: String = ""
@State var email: String = ""
@State var password: String = ""
var body: some View {
VStack(alignment: .myAlignmentGuide) {
HStack {
Text("Username").alignmentGuide(.myAlignmentGuide, computeValue: { d in d[.trailing] })
TextField($username)
.textFieldStyle(.roundedBorder)
.frame(maxWidth: 200)
}
HStack {
Text("Email")
.alignmentGuide(.myAlignmentGuide, computeValue: { d in d[.trailing] })
TextField($email)
.textFieldStyle(.roundedBorder)
.frame(maxWidth: 200)
}
HStack {
Text("Password")
.alignmentGuide(.myAlignmentGuide, computeValue: { d in d[.trailing] })
TextField($password)
.textFieldStyle(.roundedBorder)
.frame(maxWidth: 200)
}
}
}
}
使用该代码，我可以实现这种布局：
这里需要注意的是，我必须为TextFields 指定最大宽度。在不受约束的情况下，我在 cmets 中链接的 WWDC 演讲中描述的布局系统检索了 TextField 的大小在发生对齐之前，导致电子邮件的 TextField 超出了末尾另外两个。我不知道如何解决这个问题，让TextFields 扩展到包含视图的大小而不会超过...
【讨论】：
var body: some View {
VStack {
HStack {
Text("Username")
Spacer()
TextField($username)
.textFieldStyle(.roundedBorder)
.frame(maxWidth: 200)
.foregroundColor(.gray)
.accentColor(.red)
}
.padding(.horizontal, 20)
HStack {
Text("Email")
Spacer()
TextField($email)
.textFieldStyle(.roundedBorder)
.frame(maxWidth: 200)
.foregroundColor(.gray)
}
.padding(.horizontal, 20)
HStack {
Text("Password")
Spacer()
TextField($password)
.textFieldStyle(.roundedBorder)
.frame(maxWidth: 200)
.foregroundColor(.gray)
}
.padding(.horizontal, 20)
}
}
【讨论】：
您可以为此使用kontiki 的geometry reader hack：
struct Column: View {
@State private var height: CGFloat = 0
@State var text = ""
let spacing: CGFloat = 8
var body: some View {
HStack {
VStack(alignment: .leading, spacing: spacing) {
Group {
Text("Hello world")
Text("Hello Two")
Text("Hello Three")
}.frame(height: height)
}.fixedSize(horizontal: true, vertical: false)
VStack(spacing: spacing) {
TextField("label", text: $text).bindHeight(to: $height)
TextField("label 2", text: $text)
TextField("label 3", text: $text)
}.textFieldStyle(RoundedBorderTextFieldStyle())
}.fixedSize().padding()
}
}
extension View {
func bindHeight(to binding: Binding<CGFloat>) -> some View {
func spacer(with geometry: GeometryProxy) -> some View {
DispatchQueue.main.async { binding.value = geometry.size.height }
return Spacer()
}
return background(GeometryReader(content: spacer))
}
}
我们这里只读取第一个 TextField 的高度，并在三个不同的 Text View 上应用 3 次，假设所有 TextField 具有相同的高度。如果您的三个 TextField 具有不同的高度或出现/消失的验证标签会影响各个高度，您可以使用相同的技术，但使用三个不同的高度绑定。
因为此解决方案将始终首先呈现没有标签的 TextField。在此渲染阶段，它将设置文本标签的高度并触发另一个渲染。在一个布局阶段渲染所有内容会更理想。
【讨论】：
这里不是专家，但我设法通过 (1) 选择 2-VStacks-in-a-HStack 替代方案来实现所需的布局，(2) 构建外部标签，(3) 释放通过分配 maxHeight = .infinity 和 (4) 固定 HStack 的高度，它们可以摆脱默认的垂直扩展约束
struct ContentView: View {
@State var text = ""
let labels = ["Username", "Email", "Password"]
var body: some View {
HStack {
VStack(alignment: .leading) {
ForEach(labels, id: \.self) { label in
Text(label)
.frame(maxHeight: .infinity)
.padding(.bottom, 4)
}
}
VStack {
ForEach(labels, id: \.self) { label in
TextField(label, text: self.$text)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
.padding(.leading)
}
.padding(.horizontal)
.fixedSize(horizontal: false, vertical: true)
}
}
这是结果预览：
为了解决外部和内部标签的未对齐基线（与此特定布局无关的附带问题 - 参见例如 this discussion），我手动添加了填充
感谢this website 在理解的道路上启发我 SwiftUI 布局技巧
【讨论】：
您需要添加固定宽度和前导对齐。我在 Xcode 11.1 中测试过，没问题。
struct TextInputWithLabelDemo: View {
@State var text = ""
let labels = ["Username", "Email", "Password"]
var body: some View {
VStack {
ForEach(labels, id: \.self) { label in
HStack {
Text(label).frame(width: 100, alignment: .leading)
TextField(label, text: self.$text)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
.padding(.horizontal)
.fixedSize(horizontal: false, vertical: true)
}
}
}
您可以在下面看到当我们对Text 和TextField 使用不同的VStack 时会出现什么问题。查看更多信息here
仔细观察Texts和TextFields，你会发现它们有不同的高度，这会影响Texts相对于TextFields的位置，正如你在屏幕截图右侧看到的@987654336 @ 相对于Password TextField 高于Username Text 相对于Username TextField。
我给出了解决这个问题的三种方法here
【讨论】：
VStack 为Text 和TextField 时的情况
.extraExtraExtraLargeand iPhone SE（最小屏幕）宽度为 100 也能胜任
HStack{
Image(model.image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 10, alignment: .leading)
VStack(alignment: .leading) {
Text("Second column ")
Text("Second column -")
}
Spacer()
Text("3rd column")
}
1- 第一列 - 图片
2- 第二列 - 两个文本
3- 浮点值
Spacer() - 使用 Spacer() -> 上面的示例图像和 vstack 保持所有行的垂直对齐，只需将间隔用于您想要在另一个垂直对齐/列中执行的视图 VStack(alignment: .leading. - 这对于开始对齐很重要
【讨论】：