如何创建带黑色叉号与浅灰色背景的关闭按钮？

你只需要将原来的foregroundColor替换为foregroundStyle，并分别指定叉号和圆形背景的颜色即可：

Button(action: { }) {
    Image(systemName: "xmark.circle.fill")
        .imageScale(.large)
        .foregroundStyle(.black, .lightGray)
}

说明 #

xmark.circle.fill是一个分层的SF Symbol，包含前景的叉号和背景的填充圆形两部分：

• foregroundStyle的第一个参数对应前景（叉号）的颜色，这里设为.black
• 第二个参数对应背景（圆形填充）的颜色，这里设为.lightGray

原来的foregroundColor会统一设置整个图标的颜色，无法区分分层元素，因此换用foregroundStyle就能实现你想要的效果。

内容的提问来源于stack exchange，提问作者Cheok Yan Cheng