如何在 swiftUI 中为 viewController 设置背景颜色？答案

【问题标题】：How to set a background color for the viewController in swiftUI?如何在 swiftUI 中为 viewController 设置背景颜色？
【发布时间】：2019-11-02 01:02:46
【问题描述】：

我一直试图在 swiftUI 中为整个 viewController 设置背景颜色，但我无法做到。该视图不采用.backgroundColor 属性。

我也尝试在sceneDelegate 中为viewController 使用.backgroundColor 属性，它没有使用该属性，但它使用了foregroundColor 属性。

【问题讨论】：

现在，正是具体的最佳时机......当你说“viewController”时，你是在说UIViewController， UIView，还是View？前两者之间存在巨大的区别，它们是UIKit 类并且需要与 SwiftUI 集成，而第三个是 SwiftUI 和像 @rraphael 这样的修饰符给你会起作用。跨度>
我假设 viewController，Rakesh 是指整个 iPhone 屏幕。我仍然很困惑那是窗户还是场景。

标签： ios swiftui xcode11

【解决方案1】：

到目前为止，我发现最好的方法是在 ContentView 主体的顶部创建一个 ZStack 并让第一层有一个颜色，它忽略了安全区域。 Apple 将 Color 定义为“后期绑定标记”，不管它是什么，但它的行为类似于任何其他 View。

struct ContentView: View {
  var body: some View {
    ZStack {
      Color.red
      .edgesIgnoringSafeArea(.all)

      /// Your Inner View content goes here.
      VStack {
        Text("Hello") 
      } // VStack

    } // ZStack
  } // body View
}  // ContentView

注意：注意内部视图内部的内容，因为它很容易扩展以填充整个窗口，从而将背景颜色覆盖为白色等。例如，流行的 NavigationView 往往会扩展到整个窗口，对我来说，它往往会忽略其记录在案的 .background() 设置。您也可以在此处执行相同的 ZStack 策略。

NavigationView {
  ZStack { 
    Color.red.edgesIgnoringSafeArea(.all) 
    VStack {
      Text("Hello")
    } // VStack
  } // ZStack
}  // NavigationView

【讨论】：

这不适用于具有列表的 NavigationView。
请记住，List 是一个视图，然后将其加载到 NavigationView 的顶部，并类似地展开以填满屏幕。例如，如果在 NavigationView 中有 List {Text("Hello")}.opacity(0.2) 您将看到背景闪耀。因此，您将需要设置列表视图本身的样式。这是一个 StackOverflow 问题：stackoverflow.com/questions/56517904/…

【解决方案2】：

您可以使用下面的代码来更改整个视图控制器的颜色

ZStack {
        Color.red
        .edgesIgnoringSafeArea(.all)
    }

并使用此代码更改安全区域背景颜色

ZStack {
        Color.red
    }

【讨论】：

【解决方案3】：

如果您在顶视图上使用背景修饰符 (.background(Color.red))，您将使用一个新视图包裹该视图，该视图的填充或大小为红色背景色。因此，您应该使用 Rectangle() 视图和 Z 堆栈为整个视图设置完整背景，如果需要，请使用 .edgesIgnoringSafeArea

    NavigationView {
        ZStack { 
            Rectangle().foregroundColor(.blue).edgesIgnoringSafeArea(.all)
            ScrollView {
                List()
                    ForEach(modelExampleList) { modelExample in
                        Row(model: modelExample)
                    }
                }.frame(height: 200)
            }.padding(.leading, 10)
        }.navigationBarTitle(Text("ModelExample List"), displayMode: .large)
    }

【讨论】：

【解决方案4】：

我将它从ZStack 中移出，然后使用overlay 并且它起作用了。

var body: some View {
    NavigationView {
        sceneBackgroundColor
            .edgesIgnoringSafeArea(.all)
            .overlay(myView)
    }
}

【讨论】：