Question

在我添加 NavigationView 之前，TabView 对我来说效果很好。这是正常行为

当我在 TabView 周围添加 NavigationView 时出现问题 - 滚动时我在黑色矩形前面看到“test”。

我试过设置

<块引用>

UINavigationBar.appearance().backgroundColor

一些不透明的颜色，但它只是在所有东西的前面绘制了另一个矩形。

在 TabView 周围使用 NavigationView 时，有没有办法使黑色矩形不透明？

哦，还有一件事..我试着删除

<块引用>

.edgesIgnoringSafeArea(.top)

解决了问题，但顶部区域出现了巨大的空白：

import SwiftUI

struct ContentView: View {
    
    let tabData = [
        TabItem(menuTitle: Text("item 1"), menuImage: Image(systemName: "heart.fill"), bodyHeadline: Text("Postnatal recovery"), bodyMeta: Text(""), tag: 1),
        TabItem(menuTitle: Text("item 2"), menuImage: Image(systemName: "heart.fill"), bodyHeadline: Text("Weight loss"), bodyMeta: Text(""), tag: 2),
    ]
    
    var body: some View {
        NavigationView {
            ZStack {
                TabView {
                    ForEach(tabData) { tabItem in
                        VStack {
                            VStack {
                                Rectangle()
                            }
                            .frame(height: 90)
                            .background(Color.yellow)
                            
                            ScrollView {
                                LazyVStack(spacing: 0) {
                                    ForEach(0...100, id:\.self) { val in
                                        ZStack {
                                            Text("test")
                                                .font(.system(size: 128))
                                        } // ZStack
                                        .background(Color.white)
                                    } // ForEach
                                }
                            }
                            .background(Color.blue)
                            
                        }
                        
                        .tabItem {
                            tabItem.menuImage
                            tabItem.menuTitle
                                .foregroundColor(Color.red)
                        }
                        .edgesIgnoringSafeArea(.top)
                    } // ForEach
                    
                } // TabView
            } // ZStack
        } // NavigationView
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct TabItem: Identifiable {
    var id = UUID()
    var menuTitle: Text
    var menuImage: Image
    var bodyHeadline: Text
    var bodyMeta: Text
    var tag: Int
}

Answer 1

添加

<块引用>

.navigationBarHidden（真）.navigationBarTitle（ “”）

使一切工作顺利

将 TabView 放在 NavigationView 中可使标题透明

1 个答案: