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,如primarysecondarytertiaryquaternary来修改当前的样式。当前样式是层次结构中较高级别设置的样式,如果您尚未设置自定义样式,则为默认前景样式。

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 开始,我们有了新属性,例如secondarytertiaryquaternaryquinary

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

我们可以看到,如果我们将获取分层系统背景颜色的新旧方法并排放置,它们将是相同的。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静态属性不同, 例如返回的Primarysecondarytertiaryquaternaryquinary

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

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

scss 复制代码
Image(systemName: "dog") 
    .padding() 
    .background(.tint.secondary) 
Image(systemName: "dog") 
    .padding() 
    .background(.green.tertiary)

区别

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

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

相关推荐
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106326 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
凉白开<--6 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
Digitally7 小时前
如何将 iPhone 备份到电脑/PC 的前 5 种方法
ios·电脑·iphone
Swift社区9 小时前
在企业内部分发 iOS App 时如何生成并使用 manifest.plist
macos·ios·cocoa
他们都不看好你,偏偏你最不争气12 小时前
【iOS】push 和 present
ios
2501_9160137415 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184117 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张18 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
wjm04100618 小时前
ios面试八股文
ios·面试