我正試圖在SwiftUI中創建一個表單，該表單的標簽一直在文本輸入欄位的上方。
一個很好的例子是查看 iPhone 12 上的一個聯系人。有兩個獨立的輸入（包括其他）。分別是手機和筆記。
它們的外觀和空間正是我想要的樣子。
無論我如何改變下面的代碼，我總是在頂部有一個很大的空間，并且欄位本身在各部分之間有很大的空間。
Form {
Section() {
VStack(alignment: .leading) {
Text("Field1"/span>)
TextField("..."/span>, text: $Field1)
}
.padding(EdgeInsets(top: 10, leading: 0, bottom: 10, taililing: 0)
}
Section() {
VStack(alignment: .leading) {
Text("Field2"/span>)
TextField("..."/span>, text: $Field2)
}
.padding(EdgeInsets(top: 10, leading: 0, bottom: 10, taililing: 0)
}
}
如果這里的Form標簽是問題所在，那么最好將其洗掉并全部手動完成。蘋果公司似乎希望你使用Form標簽以實作交叉兼容。在我的案例中，它適用于iPad和iPhone。
uj5u.com熱心網友回復：
我對自己問題的第一個回答。這是我想出的方法（但決定不使用）。
這幾乎是我想要的外觀。
看來蘋果真的想強迫你按照 "他們的方式 "來做。
要改變表單視圖格式而不使你所嘗試的一切產生一些不需要的連鎖反應是很困難的。
我同意一些評論，這看起來確實正確，但它沒有最好的 UI 體驗。
Form {
Section() {
VStack(alignment: .leading) {
Text("Field1"/span>)
.font(.headline)
TextField("required", text: $Field1)
}
.padding(EdgeInsets(top: 10, leading: 0, bottom: 10, taililing: 0)
VStack(alignment: .leading) {
Text("Field2"/span>)
.font(.headline)
TextField("Optional", text: $Field2)
}
.padding(EdgeInsets(top: 10, leading: 0, bottom: 10, taililing: 0)
}
Section {
NavigationLink（目的地。SomeView()) {
Text("Next")
.padding()
.foregroundColor(Color.blue)
}
}
}
.navigationBarTitle("主標題")
uj5u.com熱心網友回復：
我對自己問題的第二個回答。這是我想出的辦法。
我決定順藤摸瓜。
我決定采用在文本輸入控制元件上方設定獨立標簽的方法，將標題作為標簽。這確實有一個不同的外觀。
這僅僅是因為我所追求的原始外觀并不具備最佳的 UI 體驗。
我們可以添加額外的代碼，但是它開始變得過于復雜了。
Form {
Section(header: Text("Field1") // Label
.font(.headline)
.foregroundColor(.black)
//在第一個控制元件上的padding top更大，以使它從導航欄的標題中更突出。
.padding(EdgeInsets(top: 30, leading: 5, bottom: 0, taililing: 0))) {
TextField("required", text: $Field1)
}
.textCase(nil) //我不希望標簽全部是大寫字母。
Section(header: Text("Field2") // Label
.font(.headline)
.foregroundColor(.black)
.padding(EdgeInsets(top: 0, leading: 5, bottom: 0, taililing: 0))) {
TextField("required", text: $Field1)
}
.textCase(nil)
Section {
NavigationLink（目的地。SomeView() {
Text("Next")
.padding()
.foregroundColor(Color.blue)
}
}
}
.navigationBarTitle("主標題")
uj5u.com熱心網友回復：
正如我在評論中所說，你也可以把你的欄位標題作為Section的標題放入。另外，這是你的用戶界面，讓它成為你想要的樣子。我對它的唯一評論是在設計時要考慮到可用性。你的答案給了用戶一個看起來很大的目標，但實際上只有一半大小。我并不是說這對你的應用程式是錯誤的，只是說你應該考慮一下。
Form {
Section(header: Text("Field1"/span>) ) {
TextField("required", text: $Field1)
//帶有相當于你的padding.的padding。
.padding(.vertical, 10)
//.padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))
}
Section(header: Text("Field2"/span>) ) {
TextField("Optional"/span>, text: $Field2)
//沒有填充...。
}
Section(header: Text("Field3"/span>) ) {
TextField("Optional", text: $Field2)
//帶有由系統決定的padding。
.padding(.vertical)
}
}
很明顯，這給了你一個不同的外觀。正如你會注意到的，我給了你三個不同的.padding()外觀。一個是你的，而是使用.vertical(設定.top和.bottom為相同的常量)。其次是欄位周圍沒有填充物。最后是允許系統選擇你的padding.
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/309058.html
標籤：