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.

相关推荐
与火星的孩子对话5 小时前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
恋猫de小郭1 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
点金石游戏出海1 天前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
旷世奇才李先生1 天前
Swift 安装使用教程
开发语言·ios·swift
90后的晨仔1 天前
Xcode16报错: SDK does not contain 'libarclite' at the path '/Applicati
ios
finger244801 天前
谈一谈iOS线程管理
ios·objective-c
Digitally2 天前
如何将大型视频文件从 iPhone 传输到 PC
ios·iphone
梅名智2 天前
IOS 蓝牙连接
macos·ios·cocoa
美狐美颜sdk2 天前
跨平台直播美颜SDK集成实录:Android/iOS如何适配贴纸功能
android·人工智能·ios·架构·音视频·美颜sdk·第三方美颜sdk
恋猫de小郭2 天前
Meta 宣布加入 Kotlin 基金会,将为 Kotlin 和 Android 生态提供全新支持
android·开发语言·ios·kotlin