如何使用 SwiftUI 创建具有 alpha 值的颜色？

Posted 2023-02-24

【中文标题】如何使用 SwiftUI 创建具有 alpha 值的颜色？

【英文标题】：How to create a color with an alpha value using SwiftUI?

【发布时间】：2019-06-30 05:15:55

【问题描述】：

在UIKit 中创建具有 alpha 值的颜色有不同的方法，例如：

UIColor(red: 0, green: 0, blue: 0, alpha: 0.8)

但是这个方法在SwiftUI的对应类Color上不可用。

我可以使用什么？

【参考方案1】：

在SwiftUI 中有一个特定的修饰符称为opacity，可用于更改任何颜色的alpha 级别

Text("Hello world").background(Color.black.opacity(0.8)) // Set the background color as partially transparent.

此外，可以将相同的修饰符应用于任何视图，以更改其 alpha。

Image("myImage").opacity(0.8) //The image will be partially transparent

【讨论】：

对您的回答的一点贡献：.opacity()更改任何视图的不透明度。碰巧 Color is 是一个视图。但是，不需要创建具有不透明度的颜色，因为它在初始化程序中有自己的参数（请查看我的答案）。

另外：准确地说：Text("").background(Color.black.opacity(0.8)) 不会“将颜色设置为背景”。它实际上在做的是在文本后面放置一个视图，它恰好是一个绘制特定颜色的视图。但是，您可以指定任何视图。例如，尝试：Text("2222").background(Text("1111"))

【参考方案2】：

颜色初始化器有一个不透明度参数：

Color(red: 1.0, green: 0, blue: 1.0, opacity: 0.2)

【讨论】：

这是唯一可以改变颜色不透明度但仍保持Color 类型的答案。通过将.opacity 修饰符添加到颜色，它将返回View 而不是Color。例如，您不能使用 .foregroundColor(Color.black.opacity(0.8))，因为您刚刚将 Color 更改为 View。

实际上有一个.opacity 修饰符返回Color 而不是View，我假设它是最近添加的。见my answer 或Apple

【参考方案3】：

将 opacity 修饰符应用于任何 SwiftUI 视图，例如：

RoundedRectangle(cornerRadius: 5)
    .fill(Color.yellow)
    .frame(width: 50, height: 50)
    .opacity(0.5)

【讨论】：

这可行，但不能回答 OP 关于如何创建颜色的问题。不透明度修饰符用于视图

【参考方案4】：

这里有几个答案指向.opacity() 的查看方法。这涵盖了最常见的用例，但也许 OP 想知道的是如何创建具有透明度的 Color。

一种是使用Color 构造函数，它具有颜色空间、分量和不透明度，如下面的第一个示例所示。

如果您已经拥有Color 并想要它的半透明版本，请使用到UIColor 的桥接，如下面的第二个示例所示

let transparentTeal = Color(.sRGB, red: 0.4, green: 1, blue: 0.1, opacity: 0.2)

let red = Color.red

let transparentRed = Color(UIColor(red).withAlphaComponent(0.3))

【参考方案5】：

现在似乎可以使用.opacity 方法并且仍然返回Color 而不是View：

Documentation:

func opacity(_ opacity: Double) -> Color

示例：

color.opacity(0.5)