如何在 SwiftUI 中设置叠加层的不透明度答案

【问题标题】：How to set the opacity of an overlay in SwiftUI如何在 SwiftUI 中设置叠加层的不透明度
【发布时间】：2021-08-08 01:55:37
【问题描述】：

我正在尝试在 SwiftUI 中设置叠加层的不透明度。但是，我只是尝试更改叠加层的不透明度，并希望保持被叠加符号的不透明度。但是，当我应用 .opacity() 修饰符时，它会改变整个视图的不透明度（图像和覆盖）

                Image(systemName: "magnifyingglass")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 20, height: 20)
                    .padding(10)
                    .overlay(Color.gray)
                    .opacity(0.1)
                    .clipShape(Circle())

这段代码产生this view。

如您所见，整个视图几乎不可见，我试图只使搜索图标周围的灰色圆圈不透明，并保持搜索图标本身的不透明。

【问题讨论】：

我不确定您是否包含所有代码。圆形背景从何而来？ overlay 修饰符在哪里？
另外，还有一个名为magnifyingglass.circle.fill 的系统映像，默认情况下具有类似的背景，如果您正在寻找的话。

标签： swift xcode swiftui overlay

【解决方案1】：

您正在为整个视图添加不透明度，而是将其添加到叠加层：

.overlay(Color.gray.opacity(0.1))

【讨论】：

【解决方案2】：

为什么要在符号的顶部覆盖灰色圆圈？不应该反过来吗？视图修饰符的顺序，包括.opacity()，在 SwiftUI 中非常重要。如果您只想调整灰色圆圈的不透明度，则必须在叠加层之前附加.opacity()。

Color.gray
.frame(width: 40, height: 40)
.clipShape(Circle())
.opacity(0.1) /// apply to the gray circle
.overlay( /// overlay does not get affected
    Image(systemName: "magnifyingglass")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .padding(10)
)

结果：

【讨论】：