macOS 上的 Swiftui 表单标签对齐

Posted 2023-02-24

【中文标题】macOS 上的 Swiftui 表单标签对齐

【英文标题】：Swiftui Form Label alignment on macOS

【发布时间】：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") 
                        ...
 

得到相同的结果。

如何保持标签对齐？

【参考方案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()
  

【讨论】：

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