简体   繁体   English

如何在 SwiftUI 中的表单底部添加空格?

[英]How to add blank space at the bottom of a form in SwiftUI?

I have a modal sheet in SwiftUI for adding a record.我在 SwiftUI 中有一个用于添加记录的模式表。 The modal sheet uses a form with several TextField elements.模态表使用具有多个 TextField 元素的表单。 Now I'd like to add some space to the end of the form with the same color as the form background (gray).现在我想用与表单背景(灰色)相同的颜色在表单的末尾添加一些空间。

Adding padding() to the last TextField results in all TextFields having a padding.将 padding() 添加到最后一个 TextField 会导致所有 TextField 都具有填充。 Then I tried to add a Text("").hidden().padding(.bottom, 500) as the last form element, but the space is then filled with white background color.然后我尝试添加一个 Text("").hidden().padding(.bottom, 500) 作为最后一个表单元素,但该空间随后被白色背景色填充。

Update: Here's the result you get if you put a spacer with padding inside the Form view (background is red for demonstration):更新:如果您在 Form 视图中放置一个带内边距的垫片,您会得到以下结果(背景为红色以进行演示):

在此处输入图片说明

This is the code:这是代码:

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hello, World!")
        }
        .sheet(isPresented: .constant(true), content: { SheetView() }
        )
    }
}

struct SheetView: View {
    var body: some View {
        Form {
            TextField("Demo Field", text: .constant("KK"))
            Spacer()
                .padding(.bottom, 500)
                .background(Color(.red))
        }
    }
}

What I'm looking for is the same as in Apple's Contacts app.我正在寻找的内容与 Apple 的通讯录应用程序中的内容相同。 If you go to "New Contact" and scroll down to the end of the form, there's quite some space:如果您转到“新联系人”并向下滚动到表单末尾,则会有相当多的空间:

在此处输入图片说明

To achieve that, you have to use a section为此,您必须使用一个section

struct SheetView: View {
    var body: some View {
        Form {
            Section(header: Text("")) {
                TextField("Demo Field", text: .constant("KK"))
            }
            Section(header: Text("")) {
                EmptyView()

            }
            .padding(.bottom, 200)
            Section(header: Text("")) {
                TextField("Demo Field", text: .constant("KK"))
            }
        }
    }
}

Result:结果:

在此处输入图片说明

Consider adding a Spacer() as such:考虑添加一个Spacer()如下:

Spacer()
  .padding(.bottom, 500)
  .background(gray)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM