带有 PageTabViewStyle 的 TabView 屏幕中的背景未填充整个可用的垂直空间

Question

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

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

，但这看起来不像苹果的预期行为。关键是将背景修饰符颜色扩展到足够大的高度，这样您就看不到选项卡后面的白色背景。

感谢 Asperi，分享类似问题的链接以获取灵感：

https://stackoverflow.com/a/62596307/12299030

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 倍的最小高度，可确保用户可以上下滚动，达到反弹距离，并且不会看到白色背景。在此视图上放置您想要的任何背景。

您也许可以将

EmptyView

换成您想要的任何内容，但这是我首先想到的事情。我添加了

.tag()

和

selection

，以便

ContentView

可以单独运行，以防您想进行实验。

Answer 2

如果您使用 .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) 您可以使用 ZStack 设置全尺寸背景。根据 tabView 的索引选择更新 BacgkroundVIEW。

ZStack { BackhroundView() // 或彩色图像 .ignoresSafeArea()

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

}
 .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))