[英]How To Set NavigationView Background Colour in SwiftUI
I'm trying to set the background color of a NavigationView
.我正在尝试设置NavigationView
的背景颜色。 I'm trying by adding a ZStack
using the code below (partly from the SwiftUI tutorial).我正在尝试使用下面的代码(部分来自 SwiftUI 教程)添加ZStack
。 Yet it's only ever white unless I replace NavigationView...
with Spacer()
然而,除非我用Spacer()
替换NavigationView...
,否则它只会是白色的
var body: some View {
ZStack
{
NavigationView {
List {
Toggle(isOn: $userData.showFavoritesOnly) {
Text("Favourites")
}
ForEach(userData.landmarks) { landmark in
if !self.userData.showFavoritesOnly || landmark.isFavorite {
NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
LandmarkRow(landmark: landmark)
}
}
}
}
.navigationBarTitle(Text("Landmarks"), displayMode: .large)
}
}.background(Color.blue.edgesIgnoringSafeArea(.all))
}
I can set the individual list item color but i want the whole background to show blue我可以设置单个列表项的颜色,但我希望整个背景显示为蓝色
It is same as UINavigationBar
.它与UINavigationBar
相同。 But since there is no direct api yet, you can change it using appearance
:但是由于还没有直接的 api,您可以使用appearance
更改它:
UINavigationBar.appearance().backgroundColor = .orange
UINavigationBar.appearance().tintColor = .green
UINavigationBar.appearance().barTintColor = .yellow
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]
UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]
You should put this somewhere that you sure the compiler reads like inside the init()
method.你应该把它放在你确定编译器在init()
方法中读取的地方。
Note that some of these will not work below Xcode 11 beta 5 .请注意,其中一些在 Xcode 11 beta 5 下将不起作用。
This appears to be the key in making the Navigation View transparent: UITableView.appearance().backgroundColor = .clear
这似乎是使导航视图透明的关键: UITableView.appearance().backgroundColor = .clear
Thanks to: https://izziswift.com/swiftui-list-color-background/ for that snippet.感谢: https : //izziswift.com/swiftui-list-color-background/该代码段。
Here's the code I put together and tested with Xcode 13 Beta targeting iOS 15 Beta: Screenshot ...Also tested with Xcode 13 Beta deploying to iPhone 12 iOS 14.7.这是我放在一起并使用针对 iOS 15 Beta 的 Xcode 13 Beta 进行测试的代码:屏幕截图...还使用部署到 iPhone 12 iOS 14.7 的 Xcode 13 Beta 进行了测试。
It could work with Xcode 12.x and iOS 14.x (see comments on SwiftUI 3 features you could potentially remove, etc.)它可以与 Xcode 12.x 和 iOS 14.x 一起使用(请参阅有关您可能会删除的 SwiftUI 3 功能等的评论)
// NavigationView.swift
// swiftui.proto2
//
// Created by Sunil Raman on 12/8/21
// Updated by Sunil Raman on 18/8/21
import SwiftUI
//Testing gradient backgrounds, etc. (may require Xcode 13)
//Credit: https://sarunw.com/posts/how-to-set-screen-background-color-in-swiftui/
let backgroundGradient = LinearGradient(
colors: [Color.purple, Color.red],
startPoint: .top, endPoint: .bottom)
//Build view here!
struct MyCoolListView: View {
//The "magic" happens here
//Credit: https://izziswift.com/swiftui-list-color-background/
init() {
//Appears to be the key to making Navigation View transparent
UITableView.appearance().backgroundColor = .clear
//Just for reference, not sure if opacity can be adjusted
UINavigationBar.appearance().barTintColor = .white
}
//Our view, of course
var body: some View {
//Our navigation view
NavigationView {
//Our list
List() {
//Testing sections w.r.t. layout purposes, formatting section headers, etc.
Section(header: Text("Section 1").font(.title2).foregroundColor(.yellow)) {
NavigationLink("Text 1", destination: MyCoolListView())
NavigationLink("Text 1", destination: MyCoolListView())
NavigationLink("Text 1", destination: MyCoolListView())
}
Section(header: Text("Section 2").font(.title3).fontWeight(.bold)) {
NavigationLink("Text 2", destination: MyCoolListView())
NavigationLink("Text 2", destination: MyCoolListView())
NavigationLink("Text 2", destination: MyCoolListView())
}
Section(header: Text("Section 3").font(.title3).fontWeight(.light)) {
NavigationLink("Text 3", destination: MyCoolListView())
NavigationLink("Text 3", destination: MyCoolListView())
NavigationLink("Text 3", destination: MyCoolListView())
}
//For reference, you can uncomment this to test
//.listRowBackground(Color.blue)
}
.listStyle(.insetGrouped)
//This simulates a "material" type effect, hard to apply to Lists even in SwiftUI 3?
.opacity(0.65)
//New SwiftUI 3 feature, you can use if #available(iOS 15, *) or something
//.refreshable {
//Refresh action here
//}
//Can the navigation title be manipulated further? Not sure.
.navigationTitle(Text("Title"))
//The awesome background!
.background(backgroundGradient)
//This helps with iOS 14.7
.ignoresSafeArea()
} //End NavigationView
} //End some View
} //End struct
//Enabling the previewing in Xcode
struct MyCoolListView_Previews: PreviewProvider {
static var previews: some View {
if #available(iOS 15.0, *) {
MyCoolListView()
.previewInterfaceOrientation(.landscapeLeft)
} else {
// Fallback on earlier versions
}
}
}
Here is the solution I came up with... this solution also allows you to colour the background cells a different colour to your List Elements.这是我想出的解决方案...此解决方案还允许您将背景单元格着色为与列表元素不同的颜色。
as ZStack did not work and UIView/UINavigationBar.appearance().backgroundColor would change the colour of the entire visible screen.因为 ZStack 不起作用并且 UIView/UINavigationBar.appearance().backgroundColor 会改变整个可见屏幕的颜色。
I thought I would add to this as none of the other solutions worked for me.我想我会补充这一点,因为其他解决方案都不适合我。
struct ListBackgroundColor: ViewModifier {
let color: UIColor
func body(content: Content) -> some View {
content
.onAppear() {
UITableView.appearance().backgroundColor = self.color
//(Optional) Edit colour of cell background
UITableViewCell.appearance().backgroundColor = self.color
}
}
}
extension View {
func listBackgroundColor(color: UIColor) -> some View {
ModifiedContent(content: self, modifier: ListBackgroundColor(color: color))
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.