表单选取器看起来很奇怪SwiftUI

问题描述

我正在尝试为我的应用程序设计一个注册/登录页面，但是当我尝试在表单中放置2个选择器时，该表单会填充其余的VStack，因此看起来很糟糕，如下面的屏幕快照所示。关于如何使它紧凑的想法，以便仅使选择器显示在表单内部而没有任何空白？
SwiftUI视图的代码如下。

import SwiftUI

struct SignUpView: View {
    
    @State private var firstNameTextField = ""
    @State private var lastNameTextField = ""
    @State private var emailTextField = ""
    @State private var passwordTextField = ""
    @State private var phoneNumberTextField = ""
    
    @State private var selectedGenderIndex = 0
    @State private var selectedCountryIndex = 0
    
    @Environment(\.presentationMode) private var presentationMode
    @Binding var isSignedIn: Bool
    
    var body: some View {
        VStack {
            Image("Logo")
                .resizable()
                .frame(width: 120,height: 120)
                .padding(.top,25)
            VStack {
                HStack {
                    TextField("* First name",text: $firstNameTextField)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    TextField("* Last name",text: $lastNameTextField)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                .padding(.top)
                TextField("* Email",text: $emailTextField)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                SecureField("* Password",text: $passwordTextField)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                TextField("Mobile number",text: $phoneNumberTextField)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }
            if errorIsShown {
                HStack {
                    Text("Please fill out the required fields.")
                        .foregroundColor(.red)
                        .font(Font.system(size: 12))
                        .padding(.bottom,2)
                    Spacer()
                }
            }
            if emailWarningIsShown {
                HStack {
                    Text("Please enter a valid email address.")
                        .foregroundColor(.red)
                        .font(Font.system(size: 12))
                        .padding(.bottom,2)
                    Spacer()
                }
            }
            HStack {
                Text("* required")
                    .font(Font.system(size: 12))
                Spacer()
            }
            Form {
                Picker(selection: $selectedGenderIndex,label: Text("Gender")) {
                    Text("Select").tag(0)
                    Text("Male").tag(1)
                    Text("Female").tag(2)
                }
                Picker(selection: $selectedCountryIndex,label: Text("Country")) {
                    Text("Select").tag(0)
                    Text("Country 1").tag(1)
                    Text("Country 2").tag(2)
                    Text("Country 3").tag(3)
                }
            }
            Spacer()
        }
        .padding([.leading,.trailing],20)
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）