仅在符号外部的 Swift UI 着色

问题描述

这里有两个 SF 符号，一个带有一些阴影.

如您所见，不仅第二个符号的外部被着色，内部也被着色.我如何只对外部进行着色，而将内部空白保留为白色而不是着色?理想情况下，一个解决方案适用于其他 SF 符号，因为我计划着色的不仅仅是这个符号.

代码:

struct exampleSymbol:查看{var主体:一些视图{图像(系统名称:text.bubble.fill").foregroundColor(.blue).font(.system(size: 100))}}结构栈:查看{var主体:一些视图{虚拟堆栈{示例符号()示例符号().shadow(颜色:.灰色，半径:2，x:3，y:3)}}}

解决方案

这在 iOS 15 中是可能的，使用

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

Here are two SF symbols, one with some shading.

As you can see, not only is the outside of the second symbol shaded, but so is the inside. How would I shade only the outside, leaving the inner whitespace white rather than shaded? Ideally a solution would work for other SF symbols, as I'm planning on shading more than just this symbol.

Code:

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

解决方案

This is possible in iOS 15, using a symbolRenderingMode(_:) of .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)
    }
}

Result:

For under iOS 15, you'll need to make your own custom icons.

这篇关于仅在符号外部的 Swift UI 着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！