【问题标题】:How to create a color with an alpha value using SwiftUI?如何使用 SwiftUI 创建具有 alpha 值的颜色?
【发布时间】:2019-06-30 05:15:55
【问题描述】:

UIKit 中创建具有 alpha 值的颜色有不同的方法,例如:

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

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

我可以使用什么?

【问题讨论】:

    标签: ios swiftui


    【解决方案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 answerApple
    【解决方案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)
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-06-30
        • 2015-05-08
        • 1970-01-01
        • 2021-09-05
        • 2015-07-09
        • 2018-12-01
        • 2023-03-30
        • 1970-01-01
        相关资源
        最近更新 更多