SwiftUI-如何更改视图的背景颜色?


Answers:


130

屏幕背景色

(从Xcode版本12开始)

我不确定原始海报是指整个屏幕还是单个视图的背景色。因此,我只添加此答案即可设置整个屏幕的背景色。

使用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,那颜色正好让你的主要内容是不是太无视安全区的边缘。


6
您知道如何更改NavigationView的背景颜色吗?
atalayasa

3
这将起作用,但是如果您具有NavigationView和列表或scrollview,则导航栏标题不会折叠
Richard Witherspoon

2
我只是没有运气都尝试过。香港专业教育学院一直试图找出一种方法来获得与NavigationView和scrollview一起使用的屏幕背景颜色
理查德·威瑟斯庞

1
嘿,@ Ryan,我更新了解决方案,.edgesIgnoringSafeArea(.all)以仅移至颜色,而不移至其他任何内容。这应该对您更好。
Mark Moeykens

1
关于NavigationView,请在NavigationView内部使用上方的ZStack方法,如下所示:stackoverflow.com/a/58230473/457478
Ryan

129

您可以执行以下操作:

.background(Color.black)

围绕您的观点。

例如。从默认模板(我将其包含在Group中):

    var body: some View {
        VStack {
          Text("Hello SwiftUI!")
        }
       .background(Color.black)
    }

要为其添加一些不透明度,还可以添加.opacity方法:

.background(Color.black.opacity(0.5))

您还可以使用的检查视图的元素通过CMD +点击查看并点击Show SwiftUI Inspector> Background>你的颜色

检查视图

检查细节视图


4
我无法将其用于导航视图,您知道如何使用导航视图吗?
atalayasa

您使用什么版本?
juniorRubyist

atalayasa,UINavigationBar.appearance()。backgroundColor =
.black

当我使用Rectangle()进行此操作时,最终会出现黑色填充区域。
克里斯·普林斯


15

像这样

struct ContentView : View {
    @State var fullName: String = "yushuyi"
    var body: some View {        
        VStack
            {
                TextField($fullName).background(SwiftUI.Color.red)
                Spacer()
        }.background(SwiftUI.Color.yellow.edgesIgnoringSafeArea(.all))
    }
}

1
请注意,您需要添加.edgesIgnoringSafeArea()背景色。来自UIKit,这很奇怪,但是可以用!
mbxDev

1
注意:之所以Spacer()可行,是因为将VStack推到屏幕的高度。
马克·莫肯斯

9

对于List

所有SwiftUIList均由UITableViewiOS中的a支持。因此,您需要更改tableView的背景颜色。但是,由于ColorUIColor值略有不同,因此您可以摆脱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)
    }
}

现在,您可以使用所需的任何背景(包括所有背景Color


另外首先看一下这个结果:

视图层次

如您所见,您可以像这样设置View层次结构中每个元素的颜色:

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或尝试伪造这些视图(不推荐)。


一个类似的问题,如何在“列表”行上设置颜色而不是设置颜色透明,看来我所有的尝试都无法揭示基础颜色,并且行保持白色,特别是行ListCoreCellHost保持白色。pasteboard.co/JeWCgMV.png
tGilani

好吧,我认为15分钟后在这里发布,也必须进行设置UITableViewCell.appearance().backgroundColor = .clear。:)
tGilani

4

这个解决方案行得通吗?:

将以下行添加到SceneDelegate:window.rootViewController?.view.backgroundColor = .black

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {

                window.rootViewController?.view.backgroundColor = .black
}

4

几种可能性:(SwiftUI / Xcode 11)

1个 .background(Color.black) //for system colors

2 .background(Color("green")) //for colors you created in Assets.xcassets

  1. 否则,您可以对元素执行Command+ Click,然后从那里进行更改。

希望对您有所帮助:)


3

我喜欢声明一个用于更改视图背景颜色的修饰符。

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)
  }

}

在此处输入图片说明


2

您可以简单地更改视图的背景颜色:

var body : some View{


    VStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}

并且您还可以使用ZStack:

var body : some View{


    ZStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}

2

将以下代码用于导航栏颜色自定义

struct ContentView: View {

@State var msg = "Hello SwiftUI😊"
init() {
    UINavigationBar.appearance().backgroundColor = .systemPink

     UINavigationBar.appearance().largeTitleTextAttributes = [
        .foregroundColor: UIColor.white,
               .font : UIFont(name:"Helvetica Neue", size: 40)!]

    // 3.
    UINavigationBar.appearance().titleTextAttributes = [
        .font : UIFont(name: "HelveticaNeue-Thin", size: 20)!]

}
var body: some View {
    NavigationView {
    Text(msg)
        .navigationBarTitle(Text("NAVIGATION BAR"))       
    }
    }
}

在此处输入图片说明


2

Xcode 11.5

只需使用ZStack将背景颜色或图像添加到SwiftUI的主视图中

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
        }
        .edgesIgnoringSafeArea(.vertical)
    }
}

0

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

-6

Swift UI中Scene委托上的代码

内容视图背景色

window.rootViewController?.view.backgroundColor = .lightGray

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.