SwiftUI多级导航场景下实现透明导航栏的问题求助

核心原则：只在根视图（这里是Settings View）嵌套一个NavigationView，所有子视图通过NavigationLink跳转共享同一个导航栈，绝对不要在子视图里再套NavigationView，这样就能彻底避免双导航栏问题，同时实现全层级的透明导航栏效果。

具体实现步骤 #

1. 给根NavigationView设置透明导航栏样式，子视图自动继承这个配置
2. 所有子视图保持原有UI配置，去掉多余的NavigationView嵌套
3. 按需调整列表顶部间距，避免内容与透明导航栏重叠

修改后的代码示例 #

Settings View（根视图）

NavigationView {
    List {
        NavigationLink(destination: ContactView()) {
            HStack{
                Image(systemName: "questionmark.bubble")
                    .foregroundColor(Color.primaryColor)
                Text("Contact & FAQ")
            }
        }
    }
    // 开启导航栏透明
    .toolbarBackground(.hidden, for: .navigationBar)
    // 可选：调整导航栏配色方案，确保文字在透明背景下可见
    .toolbarColorScheme(.dark, for: .navigationBar)
}

Contact & FAQ View（子视图）

List {            
    Section {
        NavigationLink(destination: FAQListView()) {
            HStack {
                Image(systemName: "questionmark.diamond")
                    .foregroundColor(Color.primaryColor)
                Text("FAQ")
                    .foregroundColor(Color.primaryBLReversed)
            }
        }
    }
    .listStyle(.insetGrouped)
    .background(Color.primaryBackground)
    .scrollContentBackground(.hidden)
    .font(Font.custom("Poppins-Regular", size: 18.37))
    .navigationBarBackButtonHidden(true)
    .navigationBarTitleDisplayMode(.inline)
    .navigationBarItems(leading: Button(action: {
        // 自定义返回按钮逻辑
    }) {
        Image(systemName: "chevron.left")
            .foregroundColor(Color.primaryColor)
    })
    // 保持导航栏透明（可选，根视图设置后子视图默认继承，但显式声明更保险）
    .toolbarBackground(.hidden, for: .navigationBar)
    .background(Color.primaryBackground)
    .padding(.top, 10)
}

FAQ List View（二级子视图）

List {
    ForEach(/* 替换成你的FAQ数据源 */) { faqItem in
        NavigationLink(destination: QuestionDetailView(question: faqItem)) {
            Text(faqItem.title)
                .foregroundColor(Color.primaryBLReversed)
        }
    }
    .padding(.top, 20)
    .background(Color.primaryBackground)
    .scrollContentBackground(.hidden)
}
.font(Font.custom("Poppins-Regular", size: 18.37))
.navigationBarBackButtonHidden(true)
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(leading: Button(action: {
    // 自定义返回按钮逻辑
}) {
    Image(systemName: "chevron.left")
        .foregroundColor(Color.primaryColor)
})
// 保持导航栏透明
.toolbarBackground(.hidden, for: .navigationBar)
.background(Color.primaryBackground)
.padding(.top, 10)

兼容旧版本iOS（iOS 15及以下） #

如果需要兼容iOS 15及更早版本，用UINavigationBar的外观设置替代SwiftUI的toolbarBackground：

// 在App的init或者根视图的onAppear中添加
init() {
    UINavigationBar.appearance().isTranslucent = true
    UINavigationBar.appearance().backgroundColor = .clear
    UINavigationBar.appearance().shadowImage = UIImage()
    // 可选：设置导航栏文字颜色
    UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.white]
    UINavigationBar.appearance().tintColor = .white
}

注意事项 #

• 导航栏透明后，列表会自动顶到屏幕顶部，所以需要用.padding(.top, 10)这类调整来避免内容被导航栏遮挡
• 确保导航栏文字/按钮颜色和背景对比足够，避免看不见的情况

内容的提问来源于stack exchange，提问作者Alex