时间戳

首页 > 解决方案 > SwiftUI 导航栏颜色

swift - SwiftUI 导航栏颜色

问题描述

我正在尝试构建一个主/详细类型示例应用程序，并且我正在努力让 NavigationBar UI 在我的详细视图中正常工作。我正在处理的视图代码如下：

struct JobDetailView : View {

    var jobDetails: JobDetails

    var body: some View {

            Form {

                Section(header: Text("General")) {
                    HStack {
                        Text("Job Name")
                        Spacer()
                        Text(jobDetails.jobName)
                            .multilineTextAlignment(.trailing)
                    }

                    HStack {
                        Text("Hourly Rate")
                        Spacer()
                        Text(TextFormatters().currencyString(amount: jobDetails.hourlyRateBasic!))
                            .multilineTextAlignment(.trailing)
                    }
                }

            }   .padding(.top)
                .navigationBarTitle(Text(jobDetails.jobName))
    }
}

的原因.padding(.top)是向上滚动时停止表单与导航栏重叠。

导航栏上的白色背景部分是我的问题（第一张图片），我应该期望它与 UI 的整体风格保持一致，我期望发生的情况显示在第二张图片中。

我试图添加前景色/背景色和视图来改变这种颜色，但无济于事。我也不愿为 NagivationBar 强制使用颜色，因为这需要进一步配置才能与暗模式一起使用。

运行应用程序时的当前视图。

预期视图。

标签： swiftxcodeswiftui

解决方案

没有可用的 (SwiftUI) API 来做这件事（还）（测试版 5）。

但我们可以使用UINavigationBar.appearance()，如：

UINavigationBar.appearance().backgroundColor = .clear

完整代码

import SwiftUI

struct JobDetailView: View {

    init() {
        UINavigationBar.appearance().backgroundColor = .clear
    }

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("General")) {
                    HStack {
                        Text("Job Name")
                        Spacer()
                        Text("Scientist")
                            .multilineTextAlignment(.trailing)
                    }
                    HStack {
                        Text("Hourly Rate")
                        Spacer()
                        Text("$ 1.00")
                            .multilineTextAlignment(.trailing)
                    }
                }

            }
            .navigationBarTitle("Scientist")
            .navigationBarHidden(false)
        }
    }
}

#if DEBUG
struct JobDetailView_Previews: PreviewProvider {
    static var previews: some View {
        JobDetailView()
    }
}
#endif

结果

结果

暗模式结果

结果暗

推荐阅读