SwiftUI 修饰符更改颜色

SwiftUI 有一些不同的修饰符可以更改颜色，例如foregroundColor(_:)、foregroundStyle(_:)和Tint(_:)。它们提供不同的功能，但有时会重叠。

foregroundColor

foregroundColor(_:)修饰符自 iOS 13 起在 SwiftUI 中可用。它可用于为层次结构中的所有可样式文本设置颜色，包括按钮等控件。

scss 复制代码

VStack { 
    Text("Hello World!") 
    Button("test") { } 
 } .foregroundColor(.teal)

还有一个foregroundColor(_:)，它在直接应用于Text。可用于为文本里面中的特定文本设置颜色。

swift 复制代码

Text("The event is on \(Text("Sunday").foregroundColor(.teal))")

foregroundStyle

foregroundStyle(_:)修饰符是在 iOS 15 中引入的，它不是简单地接受Color类型，而是接受ShapeStyle样式。

就像一样foregroundColor(_:)，foregroundStyle(_:)可用于更改层次结构中所有视图和其他前景元素（如图像和形状）的颜色。但它还提供了一些更高级的行为。

首先，我们可以使用为视图进行渐变色，而不是简单的Color。例如，我们可以将LinearGradient传递给foregroundStyle(_:)修饰符，因为LinearGradient符合ShapeStyle.

less 复制代码

VStack { 
   Image(systemName: "globe") 
   Text("Hello, world!")
 }.foregroundStyle( 
    LinearGradient(colors: [.teal, .indigo], startPoint: .top, endPoint: .bottom )
)

HierarchicalShapeStyle

另外，我们可以提供一个HierarchicalShapeStyle，如primary、secondary、tertiary或quaternary来修改当前的样式。当前样式是层次结构中较高级别设置的样式，如果您尚未设置自定义样式，则为默认前景样式。

less 复制代码

VStack { 
  Image(systemName: "globe") 
  Text("Hello, world!")
     .foregroundStyle(.secondary) 
}.foregroundStyle( 
   LinearGradient( colors: [.teal, .indigo], startPoint: .top, endPoint: .bottom ) 
)

在 iOS 17 之前，要在 SwiftUI 中获取分层系统背景颜色，我们通常必须将它们从UIColor上获取. 例如我们要获取辅助系统背景色，将使用以下代码：

scss 复制代码

Color(uiColor: .secondarySystemBackground)

从 iOS 17 开始，我们有了新属性，例如secondary、tertiary、quaternary和quinary。

要获得分层背景颜色，我们只需访问当前背景样式的这些属性：BackgroundStyle().secondary。SwiftUI 的BackgroundStyle符合ShapeStyle协议，因此访问一个实例上BackgroundStyle的secondary属性将返回当前上下文中的第二级背景，具体取决于操作系统以及是启用浅色或深色模式。

我们可以看到，如果我们将获取分层系统背景颜色的新旧方法并排放置，它们将是相同的。UIKit 系统背景颜色上升到第三级。

css 复制代码

HStack { 
   Image(systemName: "dog")
        .padding()
        .background(Color(uiColor: .secondarySystemBackground)) 
   Image(systemName: "dog")
        .padding() 
        .background(.background.secondary) 
}

新的实例属性仅在 iOS 17 上可用，因此如果您支持较旧的操作系统版本，则需要将它们的使用包装if #available(iOS 17.0, *)到较旧方法中。

css 复制代码

if #available(iOS 17.0, *) { 
    Image(systemName: "dog") 
        .padding() 
        .background(.background.secondary) 
} else { 
    Image(systemName: "dog") 
        .padding() 
        .background(Color(uiColor: .secondarySystemBackground)) 
}

用于获取返回的分层形状样式的新实例属性与旧版 iOS 版本上可用的ShapeStyle静态属性不同，例如返回的Primary、secondary、tertiary、quaternary和 quinary。

新实例属性提供了访问它们的形状样式的层次级别，例如当前背景样式的层次级别。静态属性始终提供当前前景样式的层次结构级别。

新的实例属性也可以在其他形状样式上访问，而不仅仅是背景样式。例如，我们可以获得一个TintShapeStyle或任何 SwiftUI的Color层次结构级别。

scss 复制代码

Image(systemName: "dog") 
    .padding() 
    .background(.tint.secondary) 
Image(systemName: "dog") 
    .padding() 
    .background(.green.tertiary)

区别

foregroundColor(_:)修饰符也可用于设置primary或secondary颜色，但它不支持tertiary或quaternary样式。另外值得注意的是，primary和secondary所使用的颜色foregroundColor(_:)不会像使用 do 设置的分层样式那样与当前的前景色结合foregroundStyle(_:)。

foregroundColor(_:)和foregroundStyle(_:)之间的另一个重要区别是foregroundStyle(_:)总是返回一个视图View。它不能直接应用于Text。这意味着在Text设置单个颜色时选择foregroundColor(_:)修饰符会更有效，因为它不会创建新视图，而是会修改Text.