Question

我创建了一个带有一个顶栏视图和一个主体视图的屏幕。主体包含注册表。由于形式太大，我只用ScrollView封闭了主体部分。但是，完成此操作后，表格将移至设备的前端。尽管该表格以前曾经在VStack的中心。任何人都可以告诉我在这种情况下ScrollView的主要问题是什么？

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()
    }
}

Answer 1

为您的代码

thx，我不得不给它们提供“真实”的颜色，这样我才能看到一些东西，现在我得到了此预览：

但是你想怎么拥有它呢？

我使用13.4进行了测试...也许您使用的是较旧的iOS版本？

好吧，我尝试了此操作（因为您没有向我们展示可编译的代码），并且它居中显示...所以请给我们提供一个可复制的示例...

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)
        }
    }
}

SwiftUI ScrollView将子视图推到设备的前沿

1 个答案: