我开始尝试SwiftUI,我很惊讶,它似乎不是简单的改变一个视图的背景颜色。你如何使用SwiftUI做到这一点?
当前回答
这个解决方案有效吗?:
添加以下行到SceneDelegate: window.rootViewController?backgroundColor = .black
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
if let windowScene = scene as? UIWindowScene {
window.rootViewController?.view.backgroundColor = .black
}
其他回答
你可以这样做:
.background(Color.black)
围绕着你的视野。
如。从默认模板(我把它包围在一个组):
var body: some View {
VStack {
Text("Hello SwiftUI!")
}
.background(Color.black)
}
为了添加一些不透明度,你也可以添加.opacity方法:
.background(Color.black.opacity(0.5))
你也可以通过CMD +单击视图,然后单击Show SwiftUI Inspector > Background > Your Color来使用视图的inspect元素
填充整个屏幕:
var body: some View {
Color.green.edgesIgnoringSafeArea(.all)
}
Code | Result |
---|---|
NavigationView例子:
var body: some View {
var body: some View {
NavigationView {
ZStack {
// Background
Color.blue.edgesIgnoringSafeArea(.all)
content
}
//.navigationTitle(Constants.navigationTitle)
//.navigationBarItems(leading: cancelButton, trailing: doneButton)
//.navigationViewStyle(StackNavigationViewStyle())
}
}
}
var content: some View {
// your content here; List, VStack etc - whatever you want
VStack {
Text("Hello World")
}
}
屏幕背景色
(从Xcode Version 13开始)
我不确定最初的海报是指整个屏幕的背景色还是单个视图的背景色。我将添加这个答案,即设置整个屏幕的背景色。
使用ZStack
var body: some View {
ZStack {
Color.purple
.ignoresSafeArea()
// Your other content here
// Other layers will respect the safe area edges
}
}
我添加了. ignoressafearea(),否则,它将停止在安全区域边缘。
使用叠加修饰符
var body: some View {
Color.purple
.ignoresSafeArea(.vertical) // Ignore just for the color
.overlay(
VStack(spacing: 20) {
Text("Overlay").font(.largeTitle)
Text("Example").font(.title).foregroundColor(.white)
})
}
注意:重要的是保持. ignoressafearea为颜色,这样你的主要内容就不会忽略安全区域的边缘。
iOS 15
iOS 15/Xcode 13引入了一些改变样式在安全区域边缘的工作方式。
根据我的观察,规则是:如果样式触及安全区边缘,它就会渗入安全区。
这为设置背景颜色/样式提供了更多选项。
什么是风格?
样式可以是:
颜色 材质(模糊效果) 分层视图(。第二、第三、第四系) 梯度
使用背景
因为VStack的背景接触到安全区域的边缘,紫色会渗入安全区域。
var body: some View {
VStack {
Text("Hello, World!")
Divider()
Spacer()
}
.background(Color.purple)
}
TabView
在iOS 15中,TabView不再是半透明的。这意味着背景色会直接渗透进去。
如果你想为你的TabView提供一个自定义样式,你可以添加另一个触碰底部安全区域边缘的样式,这样它就会渗透到你的TabView中。例如:
var body: some View {
TabView {
VStack {
Text("Hello, World!")
Divider()
Spacer()
// Bleeds into TabView
Rectangle()
.frame(height: 0)
.background(.thinMaterial)
}
.background(Color.purple)
.tabItem {
Text("Tab 1")
Image(systemName: "wifi")
}
}
}
NavigationView
发生在TabView上的事情也会发生在NavigationView上。
要自定义NavigationView样式,添加一个触摸顶部安全区域边缘的样式,它将渗透到NavigationView:
var body: some View {
NavigationView {
VStack {
// Bleeds into NavigationView
Rectangle()
.frame(height: 0)
.background(.ultraThinMaterial)
Text("Hello, World!")
Divider()
Spacer()
}
.background(Color.purple)
.navigationTitle(Text("Style"))
}
}
我完全愿意用其他方式来实现这个目标。如果你知道其他方法,请留下评论或编辑这个答案。
我喜欢声明一个修饰符来改变视图的背景颜色。
extension View {
func background(with color: Color) -> some View {
background(GeometryReader { geometry in
Rectangle().path(in: geometry.frame(in: .local)).foregroundColor(color)
})
}
}
然后我通过将颜色传递给视图来使用修饰符。
struct Content: View {
var body: some View {
Text("Foreground Label").foregroundColor(.green).background(with: .black)
}
}
推荐文章
- SwiftUI中的活动指标
- 如何使div背景颜色透明的CSS
- 如何用SwiftUI调整图像大小?
- 我能在视图中得到当前控制器的名称吗?
- 在SwiftUI中创建一个VStack填充屏幕宽度
- CSS:设置背景色为窗口宽度的50%
- 如何设置不透明度(Alpha)的视图在Android
- 我如何改变一个视图的背景颜色?
- 是否有一种方法以编程方式滚动滚动视图到特定的编辑文本?
- 如何使用@Binding变量实现自定义初始化
- 如何在PostgreSQL中查看视图的CREATE VIEW代码?
- 如何在Android中进行平滑的图像旋转?
- setBackground vs setBackgroundDrawable (Android)
- 谷歌Chrome显示JSON AJAX响应树,而不是纯文本
- Sass -转换十六进制为RGBa的背景不透明度