SwiftUI NavigationView 背景颜色
Posted
技术标签:
【中文标题】SwiftUI NavigationView 背景颜色【英文标题】:SwiftUI NavigationView background color 【发布时间】:2020-11-03 18:31:46 【问题描述】:我有一个ScrollView
,在VStack
中显示项目列表,而不是使用List
。我想复制 .large
导航栏标题的行为,其中背景颜色使用 .systemGroupedBackground
这是我想要的List
的行为。 Summary
的背景是透明的。
这是我在使用 ScrollView
+ VStack
时得到的行为。注意大导航栏的白色背景。
重现两者的代码是
import SwiftUI
struct MyContentView: View
var body: some View
NavigationView
ScrollView
VStack(spacing: 8)
Text("One")
.roundedContainer()
Text("Two")
.roundedContainer()
.padding()
.background(Color(.systemGroupedBackground))
.navigationBarTitle("Summary", displayMode: .large)
struct MyListContentView: View
var body: some View
NavigationView
List
Text("One")
.padding()
Text("Two")
.padding()
.listStyle(InsetGroupedListStyle())
.navigationBarTitle("Summary", displayMode: .large)
extension View
func roundedContainer() -> some View
self
.frame(maxWidth: .infinity)
.padding(.vertical)
.background(Color.white)
.cornerRadius(10)
struct MyContentView_Previews: PreviewProvider
static var previews: some View
Group
MyContentView()
MyListContentView()
【问题讨论】:
【参考方案1】:您可以按照here 的描述引入自定义 ViewModifier。
工作示例:
import SwiftUI
struct NavigationBarModifier: ViewModifier
var backgroundColor: UIColor?
init(backgroundColor: UIColor?)
self.backgroundColor = backgroundColor
func body(content: Content) -> some View
ZStack
content
VStack
GeometryReader geometry in
Color(self.backgroundColor ?? .clear)
.frame(height: geometry.safeAreaInsets.top)
.edgesIgnoringSafeArea(.top)
Spacer()
extension View
func navigationBarColor(_ backgroundColor: UIColor?) -> some View
self.modifier(NavigationBarModifier(backgroundColor: backgroundColor))
struct MyContentView: View
var body: some View
NavigationView
ScrollView
VStack(spacing: 8)
Text("One")
.roundedContainer()
Text("Two")
.roundedContainer()
.padding()
.background(Color(.systemGroupedBackground))
.navigationBarTitle("Summary", displayMode: .large)
.navigationBarColor(.systemGroupedBackground)
【讨论】:
这不会修改我的整个应用程序的导航栏吗? 您仅在特定视图上应用该修改 - 在您的情况下,修改的是视图MyContentView
中的 ScrollView
。其他视图未修改。
但修饰符调用UINavigationBar.appearance()
用于任何导航栏
它也不能完全重现 List
行为。您会注意到,列表导航栏在折叠时具有不同的颜色,并且它有一个底部边框
您可以忽略UINavigationBar.appearance()
部分。我已经编辑了上面的解决方案。 List
没有被转载,你是对的。我不知道您解决了两个问题(导航栏背景和列表样式)。以上是关于SwiftUI NavigationView 背景颜色的主要内容,如果未能解决你的问题,请参考以下文章
使用 NavigationView 和 List 时如何更改 SwiftUI 中的背景颜色?
iOS SwiftUI:使用 ScrollView 和 ZStack 正确堆叠 NavigationView?
SwiftUI嵌入Stack样式导航视图(NavigationView)中List显示怪异的解决