SwiftUI 导航栏颜色
SwiftUI Navigation Bar Colour
我正在尝试构建一个 master/detail 类型的示例应用程序,并且正在努力让 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)
的原因是向上滚动时阻止Form与导航栏重叠。
导航栏上的白色背景部分是我的问题(第一张图片),我希望它与 UI 的整体风格保持一致,我希望发生的情况显示在第二张图片中图片。
我尝试添加 foreground/background 颜色和视图来更改此颜色,但无济于事。我也不愿意强制为 NagivationBar 设置颜色,因为这需要进一步配置才能与暗模式一起使用。
Current view when running application.
Expected view.
没有可用的 (SwiftUI) API 可以做到这一点(还)(测试版 5)。
但我们可以使用 UINavigationBar.appearance()
,如:
UINavigationBar.appearance().backgroundColor = .clear
Full Code
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
Result
Dark Mode Result
我正在尝试构建一个 master/detail 类型的示例应用程序,并且正在努力让 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)
的原因是向上滚动时阻止Form与导航栏重叠。
导航栏上的白色背景部分是我的问题(第一张图片),我希望它与 UI 的整体风格保持一致,我希望发生的情况显示在第二张图片中图片。
我尝试添加 foreground/background 颜色和视图来更改此颜色,但无济于事。我也不愿意强制为 NagivationBar 设置颜色,因为这需要进一步配置才能与暗模式一起使用。
Current view when running application.
Expected view.
没有可用的 (SwiftUI) API 可以做到这一点(还)(测试版 5)。
但我们可以使用 UINavigationBar.appearance()
,如:
UINavigationBar.appearance().backgroundColor = .clear
Full Code
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
Result
Dark Mode Result