macOS SwiftUI 按钮前景色在深色/浅色外观更改后更改

Question

所以我在操场上运行下面的代码，我看到 2 个浅色按钮，然后我切换到深色模式。作为 SwiftUI 框架的一部分，这两个按钮都将前景色更新为灰白色。然后我点击一个按钮，其他按钮上的前景色变为灰色。请参阅下面的视频。 使用 Xcode 13.1

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text("Current")
                    .font(.subheadline)
                    .fontWeight(.semibold)
                    .foregroundColor(.gray)
                    .frame(maxWidth: .infinity, alignment: .leading)
                Label("43.672490, -79.388932", systemImage: "location")
                    .frame(width: 175, alignment: .trailing)
            }
            HStack {
                Button {} label: {
                    Text("???? Set Location")
                        .frame(width: 95)
                }
                Spacer()
                Button {} label: {
                    Text("???? Set Travel")
                        .frame(width: 95)
                }
            }
        }
    }
}

PlaygroundPage.current.setLiveView(ContentView())

Appearance change button issue video

任何人都遇到过这个错误并有解决方案，还是我必须创建一个自定义按钮并手动修改前景色？

Answer 1

前景色确实似乎无法在明暗模式之间正确调整。但是，我可以通过将其添加为按钮上的.foregroundColor() 来使用考虑不同外观的颜色来修复它：

struct ContentView: View {
    let buttonTextColor = Color(.secondaryLabelColor)
    var body: some View {
        VStack {
            HStack {
                Text("Current")
                    .font(.subheadline)
                    .fontWeight(.semibold)
                    .foregroundColor(.gray)
                    .frame(maxWidth: .infinity, alignment: .leading)
                Label("43.672490, -79.388932", systemImage: "location")
                    .frame(width: 175, alignment: .trailing)
            }
            HStack {
                Button {} label: {
                    Text("? Set Location")
                        .frame(width: 95)
                }
                .foregroundColor(buttonTextColor)
                Spacer()
                Button {} label: {
                    Text("? Set Travel")
                        .frame(width: 95)
                }
                .foregroundColor(buttonTextColor)
            }
        }
    }
}

这是值得向 Apple 报告错误的，恕我直言。

编辑：

要完全模仿按钮，您需要使用自定义ButtonStyle。我没有完全匹配颜色，你可以自己做，但这里是它的工作原理：

struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme
    var buttonTextColor = Color(.labelColor)
    
    var body: some View {
        VStack {
            HStack {
                Text("Current")
                    .font(.subheadline)
                    .fontWeight(.semibold)
                    .foregroundColor(.gray)
                    .frame(maxWidth: .infinity, alignment: .leading)
                Label("43.672490, -79.388932", systemImage: "location")
                    .frame(width: 175, alignment: .trailing)
            }
            HStack {
                Button {} label: {
                    Text("? Set Location")
                        .frame(width: 95)
                }
                .buttonStyle(CustomButtonStyle())
                
                Spacer()
                Button {} label: {
                    Text("? Set Travel")
                        .frame(width: 95)
                }
            }
        }
    }
}

struct CustomButtonStyle : ButtonStyle {
    @Environment(\.colorScheme) var colorScheme
    
    func makeBody(configuration: Configuration) -> some View {
        if colorScheme == .light {
        configuration.label
                    .foregroundColor(configuration.isPressed ? Color.white : Color.black)
                    .padding(3)
                    .background(RoundedRectangle(cornerRadius: 5)
                                    .fill(configuration.isPressed ? Color.blue : Color.white)
                                    .shadow(color: .gray, radius: 2, x: 0, y: 2)
                    )
        } else {
            configuration.label
                        .foregroundColor(Color.white)
                        .padding(3)
                        .background(RoundedRectangle(cornerRadius: 5)
                                        .fill(configuration.isPressed ? Color.blue : Color.gray)
                                        .shadow(color: .gray, radius: 2, x: 0, y: 2)
                        )
        }
    }
}