SwiftUI - 由于填充中的负值，我不会滚动到底部 [英] SwiftUI - ScrollView won't me scroll to the bottom because of minus values in paddings

问题描述

我不知道滚动视图内容大小或偏移量的问题.

当我尝试滚动视图时，它返回给我并停留在顶部，但正如您所看到的，我在屏幕底部有一个按钮，想要滚动到视图底部以查看整个 NEXT 按钮.

看起来内容大小有误:

这是一个包含我的代码的存储库

//使顶部图像相对于可用屏幕空间的高度虚拟堆栈{Image("MountainWelcomeBackground").resizable().frame(高度:UIScreen.main.bounds.size.height/3.0)

I have a problem with scrollview content size or offset I don't know.

When I try to scroll view it return back me and stick to the top but as you can see I have button at the bottom of screen and want to scroll to the bottom of the view to see entire NEXT button.

Looks like content size is wrong:

Here is a repo with my code https://github.com/matrosovDev/swiftui

There is a WelcomeView component which include all code, but I will copy paste it here as well, probably using minus values for padding or offset leads to this scroll view content size or offset issue:

struct WelcomeView: View {

    @State private var password = ""
    @State var showWelcomeView = false
    @State var showActivityIndicator = false

    @EnvironmentObject var userService: UserService

    var body: some View {

        ZStack {
            Color.customLightGray
            if self.showActivityIndicator {
                VStack {
                    HStack {
                        Spacer()
                        LottieView(named: "19451-blue-preloader",
                                   loop: self.showActivityIndicator,
                                   size: 200
                        )
                        Spacer()
                    }
                }
            } else {

                ScrollView {

                    VStack {
                        Image("MountainWelcomBackground").resizable().frame(height: 300)

                        CircleImage(image: userService.user.image)
                            .padding(.top, -150)
                            .frame(height: 140)
                            .frame(width: 140)

                        VStack(alignment: .leading) {
                            HStack(alignment: .top) {
                                Spacer()
                                Text(userService.user.username)
                                    .font(.headline)
                                Spacer()
                            }
                        }
                        .padding(.top, -70)

                        VStack (alignment: .leading, spacing: 10) {

                            Text("Password:")
                                .font(.headline)

                            TextField("Enter your password", text: $password)
                                .padding(.all)
                                .font(Font.system(size: 18, weight: .medium, design: .rounded))
                                .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.customCorporateBlue, lineWidth: 1))
                                .foregroundColor(Color.customCorporateBlue)
                                .keyboardType(.emailAddress)
                                .autocapitalization(.none)

                            Button(action: {
                            }) {
                                Text("Forgot password?")
                                    .fontWeight(.bold)
                                    .font(.headline)
                                    .padding(EdgeInsets(top: 20, leading: 10, bottom: 20, trailing: 0))
                                    .foregroundColor(.customCorporateBlue)
                            }

                            HStack {
                                Button(action: {
                                }) {
                                    Text("Create account")
                                        .fontWeight(.bold)
                                        .font(.subheadline)
                                        .padding()
                                        .foregroundColor(.customCorporateBlue)
                                }

                                Spacer()

                                Button(action: {
                                    //self.showActivityIndicator.toggle()
                                    //self.fetchUser(with: self.email)
                                }) {
                                    Text("Next")
                                        .fontWeight(.bold)
                                        .font(.title)
                                        .padding(EdgeInsets(top: 20, leading: 40, bottom: 20, trailing: 40))
                                        .background(Color.customCorporateBlue)
                                        .cornerRadius(8)
                                        .foregroundColor(.white)
                                }

                                //NavigationLink(destination: WelcomeView(), isActive: $showWelcomeView) { EmptyView() }
                            }

                        }.padding(.horizontal, 30)
                            .modifier(AdaptsToKeyboard())
                            .padding(.top, -20)

                        Spacer()
                    }

                }.edgesIgnoringSafeArea(.top)
            }
        }
    }
}

解决方案

It is due to many hardcoding which affect layout of different phones. For this specific use-case I would recommend the following simple solution.

Tested with partially replicated code (Xcode 11.4 / iOS 13.4 / iPhone8 / 11 Max)

// make height of top image relative to available screen space
VStack {
    Image("MountainWelcomBackground")
       .resizable()
       .frame(height: UIScreen.main.bounds.size.height / 3.0)

这篇关于SwiftUI - 由于填充中的负值，我不会滚动到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！