隐藏 TabBar 时,ScrollView 与 VStack 中的 Text 重叠
ScrollView overlaps Text in VStack when hiding TabBar
目前我正在开发一个多标签应用程序,因此 ContentView
由 TabView
组成。
在链接的 SecondView
中,我想隐藏 TabBar
,但是这样做时,ScrollView
的内容与其下方周围 VStack
的内容重叠。
以下代码是app的简化抽象代码:
struct ContentView: View {
static var tabBar: UITabBar!
var body: some View {
TabView {
NavigationView {
NavigationLink(destination: SecondView()) {
Text("Navigate")
}
}
.tabItem { EmptyView() }
}
}
}
struct SecondView: View {
var body: some View {
VStack {
ScrollView {
ForEach(0..<50) { idx in
Text("\(idx)")
}
}
Text("Just some text so visualize the overlapping")
}
.padding(.bottom, 30)
.onAppear {
ContentView.tabBar.isHidden = true
}
.padding(.bottom, -ContentView.tabBar.frame.height)
}
}
extension UITabBar {
override open func didMoveToSuperview() {
super.didMoveToSuperview()
ContentView.tabBar = self
}
}
更准确地说,在我将负填充应用于 VStack
以使免费的 space 可用后,这种情况开始发生。
有人知道如何解决这个问题吗?
因为默认Text
视图是透明的,所以你只能看到它下面的滚动视图内容。
这是一个可能的解决方案演示
VStack {
ScrollView {
ForEach(0..<50) { idx in
Text("\(idx)")
}
}
Text("Just some text so visualize the overlapping")
.padding()
.frame(maxWidth: .infinity)
.background(Color(UIColor.systemBackground))
.edgesIgnoringSafeArea(.bottom)
}
另一种可能的替代方法是剪辑 ScrollView 内容
ScrollView {
ForEach(0..<50) { idx in
Text("\(idx)")
}
}
.clipped()
目前我正在开发一个多标签应用程序,因此 ContentView
由 TabView
组成。
在链接的 SecondView
中,我想隐藏 TabBar
,但是这样做时,ScrollView
的内容与其下方周围 VStack
的内容重叠。
以下代码是app的简化抽象代码:
struct ContentView: View {
static var tabBar: UITabBar!
var body: some View {
TabView {
NavigationView {
NavigationLink(destination: SecondView()) {
Text("Navigate")
}
}
.tabItem { EmptyView() }
}
}
}
struct SecondView: View {
var body: some View {
VStack {
ScrollView {
ForEach(0..<50) { idx in
Text("\(idx)")
}
}
Text("Just some text so visualize the overlapping")
}
.padding(.bottom, 30)
.onAppear {
ContentView.tabBar.isHidden = true
}
.padding(.bottom, -ContentView.tabBar.frame.height)
}
}
extension UITabBar {
override open func didMoveToSuperview() {
super.didMoveToSuperview()
ContentView.tabBar = self
}
}
更准确地说,在我将负填充应用于 VStack
以使免费的 space 可用后,这种情况开始发生。
有人知道如何解决这个问题吗?
因为默认Text
视图是透明的,所以你只能看到它下面的滚动视图内容。
这是一个可能的解决方案演示
VStack {
ScrollView {
ForEach(0..<50) { idx in
Text("\(idx)")
}
}
Text("Just some text so visualize the overlapping")
.padding()
.frame(maxWidth: .infinity)
.background(Color(UIColor.systemBackground))
.edgesIgnoringSafeArea(.bottom)
}
另一种可能的替代方法是剪辑 ScrollView 内容
ScrollView {
ForEach(0..<50) { idx in
Text("\(idx)")
}
}
.clipped()