swiftui - Swift UI 仅在符号之外着色

Question

这是两个 SF 符号，一个带有一些阴影。

如您所见，不仅第二个符号的外部有阴影，内部也有阴影。我将如何仅对外部进行遮蔽，而将内部空白留白而不是遮蔽？理想情况下，解决方案适用于其他 SF 符号，因为我计划对这个符号进行着色。

代码：

struct exampleSymbol: View {
    var body: some View {
        Image(systemName: "text.bubble.fill")
            .foregroundColor(.blue)
            .font(.system(size: 100))
    }
}

struct stack: View {
    var body: some View {
        VStack {
            exampleSymbol()
            exampleSymbol()
                .shadow(color: .gray, radius: 2, x: 3, y: 3)
        }
    }
}

Answer 1

这在 iOS 15中是可能的，使用symbolRenderingMode(_:)..palette

       /// Note: This should be capitalized
struct ExampleSymbol: View {
    var body: some View {
        Image(systemName: "text.bubble.fill")
            .symbolRenderingMode(.palette)
            .foregroundStyle(.white, .blue)
            .font(.system(size: 100))
    }
}

struct ContentView: View {
    var body: some View {
        ExampleSymbol()
            .shadow(color: .gray, radius: 2, x: 3, y: 3)
    }
}

结果：

在 iOS 15 下，您需要制作自己的自定义图标。

Answer 2

如果您不使用 iOS 15，则可以通过 ZStack 在图标后面放置一个白色圆角矩形：

    struct exampleSymbol: View {
    var body: some View {
        Image(systemName: "text.bubble.fill")
            .foregroundColor(.blue)
            .font(.system(size: 100))
    }
}

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack {
                RoundedRectangle(cornerRadius: 10).frame(width: 80, height: 60).foregroundColor(.white)
            }
            VStack {
                exampleSymbol()
                    .shadow(color: .gray, radius: 2, x: 3, y: 3)
            }
        }
    }
}