具有透明背景的 SwiftUI NavigationView答案

【问题标题】：SwiftUI NavigationView with transparent background具有透明背景的 SwiftUI NavigationView
【发布时间】：2020-04-23 06:53:26
【问题描述】：

我有这个带有渐变背景的视图，我想在它上面放置另一个视图，最后一个视图里面有一个 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")
        }
    }
}

【问题讨论】：

您找到解决方案了吗？我面临同样的问题。将 NavigationView 的不透明度值设为 0 将使其变得透明。但是子视图也继承了相同的不透明度值。有什么办法可以只为 navigationView 添加不透明度，然后就可以了

标签： ios swift swiftui

【解决方案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()

                }
            }
        }

希望这对你也有用。

【讨论】：