swiftui中使用icon图标时，让中间部分不透明显示

1024小神2024-06-15 16:53

在使用了Image(systemName: "plus.circle.fill")这个视图组件后，发现中间的加号竟然是透明的，但是我们想要的是不让它透明，该怎么做呢？

最简单的方式就是给这个图片设置一个白色的背景是不是就好了？我们可以尝试修改一下：

Swift 复制代码

Image(systemName: "plus.circle.fill")
                              .font(.title)
                              .background(Circle().fill(.white))

可以看到确实不透明了，但是这个按钮的周围怎么出现了白色的一个边框？这也不是我们想要的结果啊，好吧，确实不能这么简单的设置

还有一种方式，就是设置symbolRenderingMode渲染模式，将渲染模式设置为色盘模式：.symbolRenderingMode(.palette)，然后自定义修改前景色和背景色：.foregroundStyle(.white, .blue)，最后出现的效果就是：

Swift 复制代码

Image(systemName: "plus.circle.fill")
                              .font(.title)
                              .symbolRenderingMode(.palette)
                              .foregroundStyle(.white, .blue)

这么设置之后，就是我们想要的结果了：