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

445 阅读1分钟

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

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

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

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

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

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

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