Apple Watch按钮呈现两种红色，如何实现全屏单色按钮？

我希望让一个Button铺满Apple Watch的整个屏幕，但当前按钮呈现出浅红和深红两种颜色。以下是我的代码，请问是否可以实现全屏仅显示单一颜色？

Button(action: {
                Task {
                    if (!muteWatch) {
                        WKInterfaceDevice.current().play(.failure)
                    }
                    Task {
                        await isWorkingSince()
                    }
                }
            }, label: {
                Text("Stop ".localized() + stopTimeString).padding().frame(
                    minWidth: 0,
                    maxWidth: .infinity,
                    minHeight: 0,
                    maxHeight: .infinity,
                    alignment: .topLeading
                  ).background(Color.red)
            }).padding().frame(
                minWidth: 0,
                maxWidth: .infinity,
                minHeight: 0,
                maxHeight: .infinity,
                alignment: .topLeading
              ).background(Color.red)

解决方案 #

出现两种颜色的核心原因是：Apple Watch的Button自带系统默认样式（包含内边距、默认背景逻辑），同时你在Button内部的Text和Button本身重复设置background(Color.red)，还添加了多余的padding()，导致颜色分层显示。

通过以下修改可以实现全屏单一红色：

• 移除所有多余的padding()，避免边缘留白或样式冲突
• 给Button添加.buttonStyle(PlainButtonStyle())，取消系统默认样式，让自定义背景完全覆盖按钮区域
• 仅在Button层级设置一次全屏frame和背景色，内部Text无需重复设置

修改后的代码：

Button(action: {
    Task {
        if (!muteWatch) {
            WKInterfaceDevice.current().play(.failure)
        }
        await isWorkingSince()
    }
}, label: {
    Text("Stop ".localized() + stopTimeString)
        .frame(
            minWidth: 0,
            maxWidth: .infinity,
            minHeight: 0,
            maxHeight: .infinity,
            alignment: .topLeading
        )
})
.buttonStyle(PlainButtonStyle())
.frame(
    minWidth: 0,
    maxWidth: .infinity,
    minHeight: 0,
    maxHeight: .infinity,
    alignment: .topLeading
)
.background(Color.red)

说明 #

• PlainButtonStyle() 消除了Button的默认样式，确保自定义背景能铺满整个按钮区域
• 移除padding()后，按钮可以完全贴合Apple Watch屏幕边缘
• 仅在Button外层设置背景色，避免内部Text的背景与Button背景叠加产生视觉分层

内容的提问来源于stack exchange，提问作者Pjaks