如何在 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())

此代码生成 this view.

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

Answer 1

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

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

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

结果：

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

How to set the opacity of an overlay in SwiftUI

xcode

overlay

swift

swiftui