带有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，但这看起来不像Apple的预期行为。关键是将背景修改器的颜色扩展到足够大的高度，这样您就看不到标签后面的白色背景。

感谢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独立运行，以防您想尝试。