[英]edgesIgnoringSafeArea on TabView with PageTabViewStyle not working
Using a TabView as a pageviewer by using .tabViewStyle(PageTabViewStyle())
works fine, but trying to let it run from edge to edge by applying edgesIgnoringSafeArea
does not seem to work.通过使用.tabViewStyle(PageTabViewStyle())
将 TabView 用作页面查看器可以正常工作,但尝试通过应用edgesIgnoringSafeArea
让它从边缘运行到边缘似乎不起作用。
What am I missing here?我在这里想念什么?
struct ContentView: View {
let colors: [Color] = [.red, .green, .blue]
var body: some View {
TabView {
ForEach(0...2, id: \.self) { index in
Rectangle()
.fill(colors[index])
}
}
.tabViewStyle(PageTabViewStyle())
.edgesIgnoringSafeArea(.all)
}
}
Adding another .edgesIgnoringSafeArea(.all)
to the Rectangle
or ForEach
also doen't work.添加另一个.edgesIgnoringSafeArea(.all)
到Rectangle
或ForEach
也不起作用。
Note that all these questions are different because they do not use use PageTabViewStyle()
:请注意,所有这些问题都是不同的,因为它们不使用 use PageTabViewStyle()
:
Their solution (adding edgesIgnoringSafeArea(.all)
) doesn't work in this case.他们的解决方案(添加edgesIgnoringSafeArea(.all)
)在这种情况下不起作用。
struct ContentView: View {
let colors: [Color] = [.red, .green, .blue]
var body: some View {
ScrollView {
TabView {
ForEach(0...2, id: \.self) { index in
Rectangle()
.fill(colors[index])
}
}
.frame(
width: UIScreen.main.bounds.width ,
height: UIScreen.main.bounds.height
)
.tabViewStyle(PageTabViewStyle())
}
.edgesIgnoringSafeArea(.all)
}
}
Here is a maximum what I've got... anyway I assume that originally it is a bug and worth submitting feedback to Apple.这是我所拥有的最大值......无论如何我认为最初它是一个错误并且值得向Apple提交反馈。
Tested with Xcode 12b用 Xcode 12b 测试
struct TestPagingStyle: View {
let colors: [Color] = [.red, .green, .blue]
var body: some View {
ZStack {
Color.black.overlay(
GeometryReader { gp in
TabView {
ForEach(0..<3, id: \.self) { index in
Text("Hello, World \(index)")
.frame(width: gp.size.width, height: gp.size.height)
.background(colors[index])
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
}
)
}.edgesIgnoringSafeArea(.all)
}
}
I worked around this annoying issue by "extending" the TabView
's height and "shifting" it towards the top by the same amount:我通过“扩展” TabView
的高度并将其向顶部“移动”相同的数量来解决这个烦人的问题:
struct ContentView: View {
var body: some View {
let yExtension: CGFloat = 50
GeometryReader { g in
TabView {
Color.red.overlay(Text("1"))
Color.green.overlay(Text("2"))
Color.blue.overlay(Text("3"))
Color.orange.overlay(Text("4"))
}
.frame(width: g.size.width, height: g.size.height + yExtension)
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
.font(Font.title.bold())
}
.offset(y: -yExtension)
.edgesIgnoringSafeArea(.all)
}
}
Tested on Xcode 12.4, iOS 14.4:在 Xcode 12.4、iOS 14.4 上测试:
Update in SwiftUI 3.0: SwiftUI 3.0 中的更新:
TabView {
ForEach(0...2, id: \.self) { index in
Rectangle()
.fill(colors[index])
}
.ignoresSafeArea()
}
.tabViewStyle(PageTabViewStyle())
.edgesIgnoringSafeArea(.all)
Wrapping TabView in a ScrollView as suggested by @kimigori here works but causes the page dots to become scrollable.按照@kimigori 的建议将TabView包装在 ScrollView 中有效,但会导致页面点变得可滚动。 To fix them in place use a horizontal ScrollView.要将它们固定到位,请使用水平 ScrollView。
Copy the code below or add the package github.com/timdubbins/PageView
for a re-usable PageView that works with ignoresSafeArea(_:edges:)
:复制下面的代码或添加 package github.com/timdubbins/PageView
以获得可与ignoresSafeArea(_:edges:)
一起使用的可重复使用的 PageView:
struct PageView<Content: View>: View {
let content: () -> Content
var body: some View {
GeometryReader { geo in
ScrollView(.horizontal) {
TabView {
content()
}
.frame(width: geo.size.width, height: geo.size.height)
.tabViewStyle(PageTabViewStyle())
}
}
}
init(@ViewBuilder content: @escaping () -> Content) {
self.content = content
}
}
Example:例子:
struct TestPageView: View {
var body: some View {
PageView {
ForEach(0...2, id: \.self) { index in
ZStack {
Rectangle()
.fill([.red, .green, .blue][index])
Text("Page \(index + 1)")
}
}
}
.ignoresSafeArea()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.