macOS 上的 Swiftui 表单标签对齐答案

【问题标题】：Swiftui Form Label alignment on macOSmacOS 上的 Swiftui 表单标签对齐
【发布时间】：2021-03-09 15:37:43
【问题描述】：

我正在 SwiftUI 中为 macOS 构建一个简单的表单，但是一旦我添加了一个选择器，布局就搞砸了。

这是我的代码：

var body: some View {
        GeometryReader { geometry in
            Form {
                HStack {
                    Text("Label")
                        .frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)

                    TextField("", text: $field1)
                }

                HStack {
                    Text("Long Label")
                        .frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
                    TextField("", text: $field2)
                }

//                HStack {
//                    Text("Picker")
//                        .frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
//
//                    Picker("", selection: $selectedColor) {
//                        ForEach(colors, id: \.self) {
//                            Text($0)
//                        }
//                    }
//                }

            }
            .padding(20)
        }
    }
}

这是出来的形式：

添加一个简单的picker，布局变成：

而且我无法保持所有标签对齐。我尝试向选择器和 HStack 添加一个框架，但没有任何帮助。

我也尝试过：

 Picker(selection: $selectedColor, label: EmptyView() {
    ...
 }

和：

 Picker(selection: $selectedColor, label: Text("Picker") {
                        ...
 }

得到相同的结果。

如何保持标签对齐？

【问题讨论】：

标签： macos swiftui

【解决方案1】：

将labelIsHidden() 添加到您的Picker：

 HStack {
   Text("Picker").frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
                    
   Picker("", selection: $selectedColor) {
                        ForEach(colors, id: \.self) {
                            Text($0)
                        }
   }.labelIsHidden()
}

【讨论】：

【解决方案2】：

我认为@jnpdx 的回答更好，但这是另一种方式。

读取代码中的cmets：
- 将 3 个 HStack 嵌入到 VStack 中
- 将 minWidth 更改为 0.24

import SwiftUI

struct ContentView: View {
  var body: some View {
    GeometryReader { geometry in
      Form {
        // Embed 3 HStacks into a VStack
        VStack {
          HStack {
            Text("Label")
              .frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
            TextField("label", text: .constant("")).labelStyle(IconOnlyLabelStyle())
          }
          
          HStack {
            Text("Long label")
              .frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
            TextField("long Label", text: .constant(""))
          }
          
          HStack {
            Text("Picker")
              // Change minWidth to 0.24
              .frame(minWidth: 0.24 * geometry.size.width, alignment: .leading)
            Picker("", selection: .constant(Color.red)) {
              ForEach([Color.red, Color.green, Color.blue], id: \.self) {
                Text($0.description)
              }
            }
          }
        }
        
      }
      .padding(20)
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

【讨论】：

这也可以，但在我的情况下不行。我简化了问题的实际代码，我的表单包含部分，我的选择器在部分内。这个解决方案搞砸了下一部分。