文本字段部分间距上方的 SwiftUI 表单标签

Question

我正在尝试在 SwiftUI 中创建一个始终在文本输入字段上方具有标签的表单。

一个很好的例子是查看 iPhone 12 上的联系人。有两个独立的输入（以及其他输入）。分别是手机和笔记。

它们的外观和空间完全符合我的喜好。

无论我如何更改以下代码，我总是在顶部有一个很大的空间，并且字段本身在部分之间有很大的空间。

Form {

    Section() {
        VStack(alignment: .leading) {
            Text("Field1")
            TextField("...", text: $Field1)
        }
        .padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))
    }
  
    Section() {
            
        VStack(alignment: .leading) {
            Text("Field2")
            TextField("...", text: $Field2)
        }
        .padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))
        
    }
}

如果这里的表单标签是问题，最好将其删除并手动完成。 Apple 似乎确实希望您使用 Form 标签来实现交叉兼容性。就我而言，它适用于 iPad 和 iPhone。

Answer 1

我对自己问题的第一个回答。这是我想出的（但决定不使用）。

这正是我想要的外观。

看来苹果确实想强迫你“按照他们的方式”去做。

如果您尝试的所有操作都没有一些不必要的连锁效应，就很难更改表单 view 格式。

我同意一些 cmets 的观点，即这看起来确实正确，但它没有最好的 UI 体验。

Form {
            
   Section() {

        VStack(alignment: .leading) {
            Text("Field1")
                .font(.headline)
            TextField("Required", text: $Field1)
        }
        .padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))

        VStack(alignment: .leading) {
            Text("Field2")
                .font(.headline)
            TextField("Optional", text: $Field2)
        }
        .padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))

    }
    
    Section {
        NavigationLink(destination: SomeView()) {
            Text("Next")
                .padding()
                .foregroundColor(Color.blue)
        }
    }

}
.navigationBarTitle("Main Title")

Answer 2

我对自己问题的第二个回答。这就是我想出的。

我决定使用标题作为标签在文本输入控件上方使用单独标签的路线。这确实有不同的外观。

这仅仅是因为我追求的原始外观没有最好的 UI 体验。

可以添加额外的代码，但它开始变得过于复杂。

Form {
                    
    Section(header: Text("Field1")  // Label
                        .font(.headline)
                        .foregroundColor(.black)
                        // The padding top is larger on the first control to make it stand out more from the navigation bar title.
                        .padding(EdgeInsets(top: 30, leading: 5, bottom: 0, trailing: 0))) {
        TextField("Required", text: $Field1)
    }
    .textCase(nil) // I dont want the label to be all uppercase.
    
    Section(header: Text("Field2")  // Label
                        .font(.headline)
                        .foregroundColor(.black)
                        .padding(EdgeInsets(top: 0, leading: 5, bottom: 0, trailing: 0))) {
        TextField("Required", text: $Field1)
    }
    .textCase(nil)
    
    Section {
        NavigationLink(destination: SomeView()) {
            Text("Next")
                .padding()
                .foregroundColor(Color.blue)
        }
    }

}
.navigationBarTitle("Main Title")

Answer 3

正如我在 cmets 中所说，您也可以将字段标题作为 Section 标头。此外，这是您的 UI，按照您的意愿制作。我对它的唯一评论是在设计时考虑可用性。您的回答为用户提供了一个看起来很大的目标，但实际上只有这个大小的一半。我并不是说这对您的应用程序是错误的，只是您应该考虑一下。

    Form {
        
        Section(header: Text("Field1") ) {
            TextField("Required", text: $Field1)
                // With padding that is equivalent to your padding.
                .padding(.vertical, 10)
            // .padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))
        }
        
        Section(header: Text("Field2") ) {
            TextField("Optional", text: $Field2)
            // Without padding...
        }
        
        Section(header: Text("Field3") ) {
            TextField("Optional", text: $Field2)
                // With padding that is determined by the system.
                .padding(.vertical)
        }
    }

显然，这会给您带来不同的外观。你会注意到，我给了你三种不同的.padding() 外观。一个是你的，而不是使用具有相同常数的.vertical（将.top 和.bottom 设置为相同）。接下来是场地周围没有填充物。最后一个允许系统选择您的填充。