按钮叠加层显示在SwiftUI的按钮文本上方

debugcn 发表于 Dev

佐根

我Button需要一些覆盖物才能获得所需的样式（描边，阴影等）。

但是，这些叠加层将覆盖Button文本。

视图：

struct ProfileTest: View {
    var body: some View {
        Button(action: {
        }){
            HStack {
                Text("OFFLINE")
                    .font(.custom("Seravek-Bold", size: 25))
                    .fontWeight(.bold)
                    .foregroundColor(Color.blue)
            }
        }.padding(EdgeInsets(top: 12, leading: 15, bottom: 12, trailing: 15))
        .cornerRadius(50)
        .overlay(
            RoundedRectangle(cornerRadius: 50)
                .stroke(Color.black, lineWidth: 1)
        )
        .overlay(
            RoundedRectangle(cornerRadius: 50)
                .fill(Color.red)
                .shadow(color: Color.black.opacity(1), radius: 1)
        )
        .opacity(0.7)
        .padding(.bottom, 100)
        .padding(.bottom, 20)
    }
}

如何调整视图，使蓝色文本显示在背景上方？

pawello2222

您可以使用自定义ButtonStyle。

创建自己的形状并在其.overlay(configuration.label)上添加：

struct CustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .hidden()
            .padding(EdgeInsets(top: 12, leading: 15, bottom: 12, trailing: 15))
            .cornerRadius(50)
            .overlay(
                RoundedRectangle(cornerRadius: 50)
                    .stroke(Color.black, lineWidth: 1)
            )
            .overlay(
                RoundedRectangle(cornerRadius: 50)
                    .fill(Color.red)
                    .shadow(color: Color.black.opacity(1), radius: 1)
            )
            .opacity(0.7)
            .overlay(configuration.label)
            .padding(.bottom, 100)
            .padding(.bottom, 20)
    }
}

您还可以用configuration.isPressed来自定义按钮按下时的标签行为。

将其应用于您的Button：

struct ContentView: View {
    var body: some View {
        Button(action: {}) {
            HStack {
                Text("OFFLINE")
                    .font(.custom("Seravek-Bold", size: 25))
                    .fontWeight(.bold)
                    .foregroundColor(Color.blue)
            }
        }
        .buttonStyle(CustomButtonStyle())
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。