SwiftUI - 由于填充中的负值,ScrollView 不会滚动到底部
SwiftUI - ScrollView won't me scroll to the bottom because of minus values in paddings
我不知道滚动视图内容大小或偏移量有问题。
当我尝试滚动查看它时 return 返回我并坚持到顶部,但如您所见,我在屏幕底部有一个按钮,我想滚动到视图底部以查看整个视图下一步按钮。
看起来内容大小不对:
这是我的代码的回购 https://github.com/matrosovDev/swiftui
有一个包含所有代码的 WelcomeView 组件,但我也会将其复制粘贴到此处,可能使用负值填充或偏移会导致此滚动视图内容大小或偏移问题:
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)
}
}
}
}
这是由于许多硬编码影响了不同手机的布局。对于这个特定的用例,我会推荐以下简单的解决方案。
使用部分复制的代码进行测试(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)
我不知道滚动视图内容大小或偏移量有问题。
当我尝试滚动查看它时 return 返回我并坚持到顶部,但如您所见,我在屏幕底部有一个按钮,我想滚动到视图底部以查看整个视图下一步按钮。
看起来内容大小不对:
这是我的代码的回购 https://github.com/matrosovDev/swiftui
有一个包含所有代码的 WelcomeView 组件,但我也会将其复制粘贴到此处,可能使用负值填充或偏移会导致此滚动视图内容大小或偏移问题:
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)
}
}
}
}
这是由于许多硬编码影响了不同手机的布局。对于这个特定的用例,我会推荐以下简单的解决方案。
使用部分复制的代码进行测试(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)