我开始尝试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
}

其他回答

屏幕背景色

(从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"))
    }
}

我完全愿意用其他方式来实现这个目标。如果你知道其他方法,请留下评论或编辑这个答案。

列表:

所有SwiftUI的列表都是由uitableview iOS支持的。所以你需要改变tableView的背景颜色。但由于Color和UIColor值略有不同,你可以去掉UIColor。

struct ContentView : View {
    init(){
        UITableView.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        List {
            Section(header: Text("First Section")) {
                Text("First Cell")
            }
            Section(header: Text("Second Section")) {
                Text("First Cell")
            }
        }
        .background(Color.yellow)
    }
}

现在你可以使用你想要的任何背景(包括所有颜色)


首先看看这个结果:

正如你所看到的,你可以像这样设置视图层次结构中每个元素的颜色:

struct ContentView: View {
    
    init(){
        UINavigationBar.appearance().backgroundColor = .green 
        //For other NavigationBar changes, look here:(https://stackoverflow.com/a/57509555/5623035)
    }

    var body: some View {
        ZStack {
            Color.yellow
            NavigationView {
                ZStack {
                    Color.blue
                    Text("Some text")
                }
            }.background(Color.red)
        }
    }
}

第一个是window:

window.backgroundColor = .magenta

常见的问题是我们还不能删除SwiftUI的HostingViewController的背景色,所以我们不能通过视图层次结构看到一些视图,比如navigationView。您应该等待API或尝试伪造这些视图(不推荐)。

填充整个屏幕:

var body: some View {
    Color.green.edgesIgnoringSafeArea(.all)
}
Code Result

我不知道为什么没有人这么说,但是background()修饰符旨在设置背景颜色,并且支持ignoresSafeArea():

var body: some View {
    Text("Da ba dee")
        .background(Color.blue.ignoresSafeArea())
}
struct Soview: View {
    var body: some View {
        VStack{
            Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
                .frame(maxWidth:.infinity,maxHeight: .infinity)
        }.background(Color.yellow).ignoresSafeArea(.all)
    }
}