如何在swiftui应用上垂直居中显示内容?

ac1kyiln  于 2022-12-10  发布在  Swift
关注(0)|答案(2)|浏览(242)

我是一个初学者,我只是想把一个简单的窗体和按钮放在一起(现在它们什么都不做)。由于某种原因,我似乎不能移动窗体--顺便说一句,这只是一个文本输入,所以可以使用不同于窗体的其他方法--使其垂直居中。有人能帮助我诊断这个问题吗?下面是我的代码:

import SwiftUI

struct CreateTopic: View {
    var body: some View {
        VStack {
            Text("Create Topic")
                .font(.largeTitle)
            Spacer() // <-- Add a Spacer view above the Form view
            Form {
                TextField("Name", text: $name)
                //                TextField("Email", text: $email)
                //                TextField("Phone", text: $phone)
            }
            .frame(height: 100)
            Spacer() // <-- Add a Spacer view below the Form view
            NavigationView {
                StandardButton(text: "Test", action: {})
            }
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    }

    @State private var name = ""
//    @State private var email = ""
//    @State private var phone = ""
}

struct CreateTopic_Previews: PreviewProvider {
    static var previews: some View {
        CreateTopic()
    }
}

我试着在窗体上方添加Spacer(),它实际上没有做任何事情,但是它确实移动了按钮。
如果我只想使用一个简单的文本输入,我是否应该不使用表格?

jtjikinw

jtjikinw1#

这里有很多误会,我们可以很快解决。

  1. Form是一个可滚动的窗体。它通常包含整个屏幕。如果您使用窗体,您将无法居中显示其内容。窗体总是将其子视图从上到下进行布局。您 * 可以 * 在较大的视图中居中显示窗体,但我不会。我运行了您的代码,您可以在100磅高的矩形内滚动窗体。这很奇怪。
  2. NavigationView是为了覆盖整个屏幕,而不仅仅是一个按钮。它可以添加导航栏,显示标题,并支持屏幕角落的按钮。它还支持所有iOS系统的标准进出屏幕切换。想想消息应用,当你点击对话时会发生什么。NavigationView可以做这些事情。
    有了这两点澄清,我将改写你的观点,有两种方式。

选项1,使用表单

struct CreateTopic: View {
    var body: some View {
        NavigationView {
            Form {
                Section {
                    TextField("Name", text: $name)
                        .textContentType(.name)
                    
                    TextField("Email", text: $email)
                        .textContentType(.emailAddress)
                    
                    TextField("Phone", text: $phone)
                        .textContentType(.telephoneNumber)
                        .keyboardType(.phonePad)
                }
                
                Section {
                    Button("Create") {
                        // Create the topic
                    }
                }
            }
            .navigationTitle("Create Topic")
        }
    }
    
    @State private var name = ""
    @State private var email = ""
    @State private var phone = ""
}

选项2,不使用表单,按您的需要使文本字段居中

struct CreateTopic: View {
    var body: some View {
        NavigationView {
            VStack {
                TextField("Name", text: $name)
                    .textContentType(.name)
                
                TextField("Email", text: $email)
                    .textContentType(.emailAddress)
                
                TextField("Phone", text: $phone)
                    .textContentType(.telephoneNumber)
                    .keyboardType(.phonePad)
                
                Button("Create") {
                    // Create the topic
                }
            }
            .textFieldStyle(.roundedBorder)
            .padding()
            .frame(maxHeight: .infinity)
            .background(Color(.systemGroupedBackground))
            .navigationTitle("Create Topic")
        }
    }
    
    @State private var name = ""
    @State private var email = ""
    @State private var phone = ""
}

Form更符合iOS的风格,但第二个选项看起来不错,可能是你想要的。

t40tm48m

t40tm48m2#

可以在“窗体”视图上使用.center alignment修饰符使其垂直居中。还可以在“窗体”视图的上方和下方添加“分隔符”视图,以将“窗体”推到屏幕的中心。

import SwiftUI

struct CreateTopic: View {
    var body: some View {
        VStack {
            Text("Create Topic")
                .font(.largeTitle)

            // Add a Spacer view above the Form view
            Spacer()

            // Use the .center alignment modifier to center the Form view vertically
            Form {
                TextField("Name", text: $name)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding()
            }
            .center

            // Add a Spacer view below the Form view
            Spacer()

            NavigationView {
                StandardButton(text: "Test", action: {})
            }
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    }

    @State private var name = ""
}

struct CreateTopic_Previews: PreviewProvider {
    static var previews: some View {
        CreateTopic()
    }
}

相关问题