SwiftUI ScrollView выдвигает подпредставление к переднему краю устройства - PullRequest
Новая
       26

SwiftUI ScrollView выдвигает подпредставление к переднему краю устройства

0 голосов
/ 12 апреля 2020

Я создал экран с одной верхней панелью и основным корпусом. Основная часть содержит регистрационную форму. Поскольку форма слишком велика, я включил в ScrollView только часть тела. Однако после этого форма перемещается к переднему краю устройства. Хотя раньше форма была в центре VStack. Может ли кто-нибудь сказать мне, что является главной проблемой ScrollView в этом случае? Here is the View

import SwiftUI

struct HubRegistrationView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack (spacing: 0) {
                VStack {
                    HeaderView()
                }
                .frame(width: geometry.size.width)
                .padding()
                .background(Color("B1"))
                ScrollView(.vertical) {
                    ZStack {
                        Image("App Background")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .offset(y: -geometry.size.height/8)
                        HubFormView()
                    }
                    .frame(width: geometry.size.width)
                }
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}

struct HubRegistrationView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            HubRegistrationView()
            HubRegistrationView()
                .previewDevice("iPhone 8")
        }
    }
}

import SwiftUI

struct HubFormView: View {
    @State var hubOwner: String = ""

    var body: some View {
        GeometryReader { geometry in
            VStack {
                HStack {
                    Text("Hub Owner")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("00-00-2020", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    Text("Hub Name")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("Motorcycle", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                Button(action: {}) {
                    Text("Phone")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    Text("Motorcycle")
                        .foregroundColor(Color("T5"))
                    Spacer()
                    Image(systemName: "chevron.down")
                        .font(.system(size: 20))
                        .padding(.trailing)
                        .foregroundColor(Color("T1"))
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                Button(action: {}) {
                    Text("Email")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    Text("Motorcycle")
                        .foregroundColor(Color("T5"))
                    Spacer()
                    Image(systemName: "chevron.down")
                        .font(.system(size: 20))
                        .padding(.trailing)
                        .foregroundColor(Color("T1"))
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    Text("Street")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("Shah Makdun Ave, Uttara", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    HStack {
                        Text("ZIP Code")
                            .foregroundColor(Color("T6"))
                            .padding(.leading)
                        Text("|")
                            .frame(width: 1, height: 40)
                            .background(Color("Border1"))
                        TextField("1205", text: self.$hubOwner)
                    }
                    .font(.system(size: 13))
                    .frame(width: geometry.size.width/2.9, height: 40)
                    .overlay(
                        RoundedRectangle(cornerRadius: 8)
                            .stroke(Color("Border1"), lineWidth: 1)
                    )

                    Button(action: {}) {
                        Text("City")
                            .foregroundColor(Color("T6"))
                            .padding(.leading)
                        Text("|")
                            .frame(width: 1, height: 40)
                            .background(Color("Border1"))
                        Text("Dhaka")
                            .foregroundColor(Color("T5"))
                        Spacer()
                        Image(systemName: "chevron.down")
                            .font(.system(size: 20))
                            .padding(.trailing)
                            .foregroundColor(Color("T1"))
                    }
                    .font(.system(size: 13))
                    .frame(width: geometry.size.width/2.9, height: 40)
                    .overlay(
                        RoundedRectangle(cornerRadius: 8)
                            .stroke(Color("Border1"), lineWidth: 1)
                    )
                }

                HStack {
                    Text("Trade Licence")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("Licence No.", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    Text("TIN")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("TIN No.", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    Image(systemName: "checkmark.square.fill")
                        .resizable()
                        .frame(width: 15, height: 15)
                    Text("I have accepted the")
                    Text("terms and conditions")
                        .foregroundColor(Color("T2"))
                    Spacer()
                }
                .font(.system(size: 12))
                .padding(.top, 10)
                .frame(width: 300)

                HStack {
                    Spacer()
                    Button(action: {}) {
                        Text("SUBMIT")
                        .foregroundColor(Color("T3"))
                    }
                    .padding()
                    .background(Color("B2"))
                .cornerRadius(6)
                }
                .padding(.top)
                .frame(width: geometry.size.width/1.4, height: 40)
            }
            .padding(.top, 60)
            .padding(.leading, geometry.size.width/7)
        }
    }
}


struct HubFormView_Previews: PreviewProvider {
    static var previews: some View {
        HubFormView()
    }
}




import SwiftUI

struct HeaderView: View {
    var body: some View {
        HStack {
            Image("Back Icon")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50, height: 50)
            Text("HUB REGISTRATION")
                .font(.system(size: 25))
                .padding()
                .foregroundColor(Color("T3"))
        }
        .padding(.top)
    }
}

struct HeaderView_Previews: PreviewProvider {
    static var previews: some View {
        HeaderView()
    }
}

1 Ответ

1 голос
/ 12 апреля 2020

спасибо за ваш код, я должен был дать им "настоящие" цвета, чтобы я мог что-то увидеть, и я получил этот предварительный просмотр сейчас:

Но как вы хотите его получить?

Я проверил с 13.4 ... может быть, у вас есть iOS более старая версия?

enter image description here

хорошо, я попробовал это (потому что вы не показали нам компилируемый код) и он центрирован ... поэтому, пожалуйста, дайте нам воспроизводимый пример ... 

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack (spacing: 0) {
                Spacer()
                VStack {
                    Text("Hello")
                }
                .frame(width: geometry.size.width)
                .padding()
                .background(Color("B1"))
                ScrollView(.vertical) {
                    ZStack {
                        Image("App Background")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .offset(y: -geometry.size.height/8)
                        Text("aha")
                    }
                    .frame(width: geometry.size.width)
                }
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}
...