带有 PageTabViewStyle 的 TabView 中的屏幕背景不会填满整个垂直 space 可用

Question

我想要一个使用 PageTabViewStyle 的 TabView，每个单独的屏幕都有不同的背景颜色，可以填充整个可用的垂直 space（即扩展到安全区域）。

TabView(selection: $selection) {
    VStack {
        Text("screen 1")
    }.frame(maxWidth: .infinity, maxHeight: .infinity)
     .background(Color.green)
    
    VStack {
        Text("screen 2")
    }.frame(maxWidth: .infinity, maxHeight: .infinity)
     .background(Color.red)

}.edgesIgnoringSafeArea(.all)
 .frame(maxWidth: .infinity, maxHeight: .infinity)
 .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

然而，它看起来像这样：

滚动到底部后：

如果我为 TabView 本身设置背景颜色，则可以更改白色，如果每个屏幕使用相同的背景颜色就可以了。有没有什么办法可以让 TabView 中的各个屏幕设置一个独特的背景颜色来填充整个屏幕？

Answer 1

通常我不会建议 GeometryReader，但这看起来不像 Apple 的预期行为。关键是将背景修改器颜色扩展到足够大的高度，这样你就看不到选项卡后面的白色背景了。

感谢 Asperi 分享 link 类似问题的灵感：

struct ContentView: View {
    
    @State private var selection: Int = 0
    
    var body: some View {
        GeometryReader { geo in
            TabView(selection: $selection) {
                
                VStack {
                    Text("Screen 1")
                }.frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(
                    EmptyView()
                        .frame(minHeight: 2 * geo.size.height)
                        .background(Color.green)
                )
                .tag(0)
                
                VStack {
                    Text("Screen 2")
                }.frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(
                    EmptyView()
                        .frame(minHeight: 2 * geo.size.height)
                        .background(Color.red)
                )
                .tag(1)

            }.edgesIgnoringSafeArea(.all)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        }
    
    }
    
}

使用 EmptyView 结合设置的最小高度为当前高度的 2 倍可确保用户可以上下滚动，到达 bounce-back 距离，并且不会看到白色背景。在此视图上放置您喜欢的任何背景。

您可以将 EmptyView 换成您喜欢的任何内容，但这是我首先想到的。我添加了 .tag() 和 selection 以便 ContentView 可以单独运行以防你想试验。

带有 PageTabViewStyle 的 TabView 中的屏幕背景不会填满整个垂直 space 可用

Background in screens in TabView w/ PageTabViewStyle doesn't fill entire vertical space available

background-color

ios

tabview

swift

swiftui