SwiftUI NavigationView具有透明背景

Question

我有一个以渐变为背景的视图，我想在其上放置另一个视图，最后一个视图内部有NavigationView，但是由于某种原因我不能使其具有透明背景，因此我可以显示离开后面的渐变。

更奇怪的是，甚至无法更改NavigationView的背景颜色，我看过每个地方，但似乎找不到任何可以改变颜色的方法。也不要使其透明

第一个视图（一个要显示渐变背景的视图）

ZStack {  // Global Stack for views
    //Background gradient
    VStack {
        LinearGradient(gradient: Gradient(colors: [Color("background2"), Color(.systemBackground)]), startPoint: .top, endPoint: .bottom)
            .frame(height: screenHeight/4)
        Spacer()
    }.background(Color(.systemBackground))

    Subjects()
        
    VStack {
        HStack {    // Topbar with menu-btn and profile-btn
            MenuButton(show: self.$showMenu)
                .disabled(self.showProfile)
            Spacer()
            
            HStack {
                TodayButton(show: self.$showToday)
                ProfileButton(show: self.$showProfile)
            }
        }
        Spacer()
    }
    .padding()
    .padding(.top, screenHeight*0.05)
}

第二个视图（带有要使之透明的NavigationView的视图）

struct Subjects: View {
    
    let subjects = [
        Subject(id: UUID(), name: "Matematica", color: "ff06f0", grades: [3,7,6.5,5.5]),
        Subject(id: UUID(), name: "Informatica", color: "5506f9", grades: [7,5,4.5,6,9]),
        Subject(id: UUID(), name: "Geografia", color: "f39904", grades: [2,5,10,6.5,9,10,4.5])
    ]
    
    var body: some View {
        
        ZStack(alignment: .bottomTrailing) {
            
            ZStack {
                NavigationView {
                    VStack(spacing: 5) {
                        ScrollView(.vertical, showsIndicators: false) {
                            VStack(spacing: 30) {
                                ForEach(subjects) { subject in
                                    SubjectCard(subject: subject)
                                }
                            }.padding()
                                .padding(.top)
                        }
                    }.navigationBarTitle(Text("Materie"))
                }
            }.offset(y: screenHeight*0.1)
            
            ActionButton(icon: "plus")
        }
    }
}

Answer 1

我在包含列表和导航链接的 NavigationView 上遇到了几乎完全相同的问题。这些看起来是白色的，挡住了我的渐变背景，它在 ZStack 的下面。我从未找到有效的答案，但我确实找到了解决方法。

我通过在包含这些元素的 VStack 上添加 .blendMode(.darken) 解决了这个问题。变暗混合模式将选择两个视图中较暗的并显示它。如果您的渐变较浅，您可能想尝试 .blendMode(.lighten)。请参阅下面的代码，看看它是否适合您。

NavigationView {
            ZStack {
                LinearGradient(gradient: Gradient(colors: [Color.purple  , Color.green]), startPoint: .topLeading, endPoint: .bottomTrailing)
                    .ignoresSafeArea()
                VStack {
                    SideMenuHeaderView()

                    VStack {
                        List(SideMenuViewModel.MenuItem.allCases) { itemText in

                            NavigationLink(destination: viewModel.getDestination(itemText: itemText.rawValue)) {
                                SideMenuCell(text: itemText.rawValue)
                            }
                        }
                    }.blendMode(.darken)
                    .padding()

                }
            }
        }

希望这也适用于您。