Question

我想为明暗模式的按钮设置自定义buttonStyle修饰符。如何基于亮或暗模式更改buttonStyle修饰符？我想为按钮设置“自定义”修改器，以实现明暗模式。

这是我的按钮代码，

Button(action: {
    print("button tapped")

}, label: {
    LinearGradient(gradient: Gradient(colors: [.darkBlueColor, .lightBlueColor]), startPoint: .top, endPoint: .bottom)
        .mask(Image(systemName: "ellipsis")
            .resizable()
            .aspectRatio(contentMode: .fit)
    ).frame(width: iPhoneSE ? 26 : 25, height: iPhoneSE ? 26 : 25, alignment: .center)
})
.buttonStyle(lightButtonStyle())

struct lightButtonStyle: ButtonStyle {

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
        .padding(10)
        .background(
            Group {
                if configuration.isPressed {
                    Circle()
                        .fill(Color.offWhite)
                        .overlay(

                            Circle()
                                .stroke(Color.lightGray2, lineWidth: 4)
                                .blur(radius: 1)
                                .offset(x: 2, y: 2)
                                .mask(Circle().fill(LinearGradient(Color.black, Color.clear)))
                        )
                        .overlay(
                            Circle()
                                .stroke(Color.white, lineWidth: 4)
                                .blur(radius: 1)
                                .offset(x: -2, y: -2)
                                .mask(Circle().fill(LinearGradient(Color.clear, Color.black)))
                        )
                } else {
                    Circle()
                        .fill(Color.offWhite)
                        .shadow(color: Color.white.opacity(0.8), radius: 1, x: -2, y: -2)
                        .shadow(color: Color.lightPurple.opacity(0.6), radius: 1, x: 2, y: 2)
                }
            }
        )
    }
}

对于深色模式，我还有另一个按钮样式，具有不同的颜色和阴影。

我知道我们可以更改其他修饰符，

.fill(colorScheme == .dark ? Color.darkEnd : Color.white)

但是有些我无法更改buttonStyle修饰符。

Answer 1

只需将该条件放入按钮样式修饰符，例如

// ... other your code
})
.buttonStyle(CustomButtonStyle(scheme: colorScheme)) // << here !!

并采用自定义样式

struct CustomButtonStyle: ButtonStyle {
    var scheme: ColorScheme              // << here !!

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
        .padding(10)
            Group {
                if configuration.isPressed {
                    Circle()   // example of internal dependency on scheme
                        .fill(self.scheme == .dark ? Color.offBlack :  Color.offWhite)

    // .. other code here
}

Answer 2

您可以在Assets.xcassets中定义一种带有深色模式的变体颜色：

即使在ButtonStyle中，它也可以开箱即用：

Color("ButtonBorder")

在SwiftUI中基于亮或暗模式更改buttonStyle修饰符

2 个答案: