在使用了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)
这么设置之后,就是我们想要的结果了: