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

【问题标题】：Background in screens in TabView w/ PageTabViewStyle doesn't fill entire vertical space available带有 PageTabViewStyle 的 TabView 屏幕中的背景不会填满整个可用的垂直空间
【发布时间】：2020-10-05 17:17:25
【问题描述】：

我想要一个使用 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 中的各个屏幕设置一个独特的背景颜色来填充整个屏幕？

【问题讨论】：

这是否回答了您的问题stackoverflow.com/a/62596307/12299030？
嗯，它没有回答它，因为代码不会导致背景颜色填充整个可用空间，但看起来确实是同一个问题。

标签： ios swift swiftui background-color tabview

【解决方案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 可以单独运行，以备您进行实验时使用。

【讨论】：