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

Question

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

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

这段代码生成这个视图。正如你所看到的，整个视图几乎不可见，我试图只让搜索图标周围的灰色圆变得不透明，并保持搜索图标本身的透明度。

- Stoic

---

我不确定你是否包含了所有的代码。圆形背景是从哪里来的？overlay修饰符在哪里？ - George

另外，还有一个名为magnifyingglass.circle.fill的系统图像，默认情况下具有类似的背景，如果这正是您要寻找的内容。 - George

Answer 1

你正在为整个视图添加透明度，应该为覆盖层添加透明度： .overlay(Color.gray.opacity(0.1))

- Phil Dukhov

Answer 2

为什么你要把灰色圆圈覆盖在符号上面？难道不应该反过来吗？在SwiftUI中，视图修饰符的顺序非常重要，包括.opacity()。如果您只想调整灰色圆圈的不透明度，必须在叠加层之前附加.opacity()。请注意保留HTML标签。

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)
)

结果：

- aheze