使 TabView 背景透明 [英] Make TabView Background Transparent

问题描述

SwiftUI 中的视图默认具有透明背景.这通常意味着它们具有白色背景，因为这是您应用的默认背景颜色.但是，这也意味着您可以使用 ZStack 来更改整个应用程序的背景颜色，除非您明确设置自己的背景颜色，否则该颜色将显示在所有视图中:

Views in SwiftUI have a transparent background by default. This usually means that they have a white background because that's the default background color of your app. However, this also means that you can use a ZStack to change the background color of your entire app and that color will show through all your views unless you explicitly set their own background color:

struct Main: View {
    var body: some View {
        ZStack {
            Color.orange.edgesIgnoringSafeArea(.all)

            // Sub-view inlined
            VStack {
                Text("Hello World")
                Button("Press Me", action: { print("Pressed") })
            }
        }
    }
}

我遇到的问题是 TabView 不是这样:

The problem I have run into is that this is not true for a TabView:

struct Main: View {
    var body: some View {
        ZStack {
            Color.orange.edgesIgnoringSafeArea(.all)

            // Sub-view inlined
            TabView {
                VStack {
                    Text("Hello World")
                    Button("Press Me", action: { print("Pressed") })
                }.tabItem {
                    Text("First Page")
                }
            }
        } 
    }
}

TabView 阻挡背景色:

我可以更改子视图的背景颜色，但如果我将其设置为透明，背景将再次变为白色，而不是在 ZStack 中显示底层颜色.我还尝试了各种其他方法来使 TabView 透明，例如将其背景设置为 Color.clear，但无济于事.

I can change the background color of the subview, but if I make it transparent, the background is white again instead of showing the underlying color in the ZStack. I've also tried sundry other ways to make the TabView transparent, such as setting its background to Color.clear, but to no avail.

TL;DR

是否可以使 TabView 透明而不是白色?

Is it possible to make a TabView transparent instead of white?

推荐答案

每个选项卡的宿主视图都有系统背景颜色(不透明).

The hosting view of every tab has system background color (which is opaque).

这是可能的解决方法.使用 Xcode 12/iOS 14 测试

Here is possible workaround. Tested with Xcode 12 / iOS 14

struct BackgroundHelper: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            // find first superview with color and make it transparent
            var parent = view.superview
            repeat {
                if parent?.backgroundColor != nil {
                    parent?.backgroundColor = UIColor.clear
                    break
                }
                parent = parent?.superview
            } while (parent != nil)
        }
        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.orange.edgesIgnoringSafeArea(.all)

            // Sub-view inlined
            TabView {
                VStack {
                    Text("Hello World")
                    Button("Press Me", action: { print("Pressed") })
                }
                .background(BackgroundHelper())  // add to each tab if needed
                .tabItem {
                    Text("First Page")
                }
                Text("Second")
                    .background(BackgroundHelper())  // add to each tab if needed
                    .tabItem {
                        Text("Second Page")
                    }
            }
        }
    }
}

这篇关于使 TabView 背景透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！