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

Question

我开始尝试SwiftUI，但感到惊讶的是，更改View的 backgroundColor 似乎并不简单。您如何使用SwiftUI来做到这一点？

Answer 1

您可以执行以下操作：

.background(Color.black)

围绕您的观点。

例如来自默认模板（我将其包含在一个组中）：

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

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

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

您还可以通过CMD使用视图的检查元素+单击视图，然后单击检查>背景>颜色

说句公道话，SwiftUI刚刚发布，所以我想自动完成功能还不存在。

Answer 2

填满整个屏幕

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

Answer 3

屏幕的背景颜色

（自Xcode版本11.0 beta（11M336w）起）

我不确定原始海报是指整个屏幕还是单个视图的背景色。因此，我将添加此答案，这是设置整个屏幕背景颜色的一种方法：

var body: some View {
    ZStack
        {
            Color.purple
                .edgesIgnoringSafeArea(.all)

            // Your other content here
    }
}

我添加了.edgesIgnoringSafeArea(.all)，因为否则它将在安全区域边缘停止。

Answer 4

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

Answer 5

喜欢

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

Answer 6

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

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

}

Answer 7

此解决方案行得通吗？：

将以下行添加到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
}

Answer 8

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

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

Answer 9

Xcode 11.5

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

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

Answer 10

对于List：

在iOS中，所有SwiftUI的List都由UITableView支持。因此您需要更改 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)
    }
}

现在，您可以使用任何背景（包括所有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或尝试伪造这些视图（不推荐）。

Answer 11

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

var body : some View{


    VStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}

您还可以使用ZStack：

var body : some View{


    ZStack{

        Color.blue.edgesIgnoringSafeArea(.all)

    }


}

Answer 12

多种可能性：（SwiftUI / Xcode 11）

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

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

1. 否则，您可以在元素上执行 Command + 点击并从此处进行更改。

希望有帮助：）

Answer 13

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

Answer 14

快速用户界面

中的场景委托代码

内容视图背景色

window.rootViewController？.view.backgroundColor = .lightGray