我正在构建一个应用作为学习项目。我遇到了一个问题,我的一个选项卡无缘无故地垂直和水平滚动。 安全区域外没有任何内容,我想不出它向侧面滚动的原因。
我已经尝试过不同的方法,用 GeometryReader
替换 VStack
,指定我希望它是一个垂直的 ScrollView
。将 .clipped
添加到视图的末尾以及删除或替换其他几个视图
但没有任何效果。
关于项目:
视图包含在 TabView
和 NavigationView
中。所有其他标签都以相同的方式包装,一个也使用了 ScrollView
,但没有这个问题。
主要代码:
struct InformationView: View {
@EnvironmentObject var model: ViewModel
var radialColor1 = Color.init(red: 225/255, green: 210/255, blue: 164/255)
var radialColor2 = Color.init(red: 233/255, green: 222/255, blue: 188/255)
var isShowingWarning = true
var body: some View {
GeometryReader { geo in
ScrollView(.vertical) {
VStack(alignment: .leading) {
Text("Here is a Text")
.padding(.vertical)
// W-fragen Stack
W_FragenCardView()
Text("Here is another Text")
.padding(.vertical)
Text("Kontakt:")
.font(.title3)
.bold()
ContactView()
}
.padding(.horizontal)
if isShowingWarning {
ZStack {
Rectangle()
.foregroundColor(Color.customRed())
Text("Here is a third Text")
.minimumScaleFactor(0.1)
.lineLimit(10)
.padding()
}
.frame(height: geo.size.height/5)
// .frame(height: 100)
}
Text("Current Theme: \(model.themes[1]!)")
}
}
.navigationBarTitle("Informationen", displayMode: .automatic)
}
}
这是它的包装:
struct ContentView: View {
@EnvironmentObject var model: ViewModel
var body: some View {
TabView {
NavigationView {
AnmeldungsView()
}
.tabItem {
Image(systemName: "square.and.pencil")
Text("Anmelden")
}
NavigationView {
FotosView()
}
.tabItem {
Image(systemName: "photo.fill.on.rectangle.fill")
Text("Fotos")
}
NavigationView {
InformationView()
}
.tabItem {
Image(systemName: "info.circle")
Text("Informationen")
}
}
}
}
And here an Image of how it looks when scrolling.
我希望这足以理解我的问题。非常感谢任何帮助或想法。
P.S.:我是堆栈溢出的新手,所以如果违反任何规则,请告诉我:)
答案 0 :(得分:0)
您应该在 ScrollView 中编写数组([.horizontal, .vertical])
而不是 .vertical
。
将您的代码更改为:
GeometryReader { geo in
ScrollView([.horizontal, .vertical]) {
VStack(alignment: .leading) {
Text("Here is a Text")
.padding(.vertical)
W_FragenCardView()
Text("Here is another Text")
.padding(.vertical)
Text("Kontakt:")
.font(.title3)
.bold()
ContactView()
}
.padding(.horizontal)
if isShowingWarning {
ZStack {
Rectangle()
.foregroundColor(Color.red)
Text("Here is a third Text")
.minimumScaleFactor(0.1)
.lineLimit(10)
.padding()
}
.frame(height: geo.size.height/5)
// .frame(height: 100)
}
}
我希望它会起作用:)
答案 1 :(得分:0)
geo.size.height/5
和 navigationBarTitle
之间的问题位于 displayMode: .automatic
。
这导致可用高度发生变化并以某种方式出错。要么将 displayMode:
更改为 .inline
或 .large
,或者您将 geo.size.height/5
替换为硬编码的 Int,我使用了 150
。