Блог

Главная - Вопросы по программированию - Наложение кнопок отображается поверх текста кнопки, SwiftUI

Наложение кнопок отображается поверх текста кнопки, SwiftUI

#ios #swift #swiftui

#iOS #swift #swiftui

Вопрос:

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)
    }
}

Как я могу настроить свой вид так, чтобы синий текст отображался над фоном?

Ответ №1:

Вы можете использовать пользовательский ButtonStyle .

  1. Создайте свою собственную фигуру и добавьте .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 настроить поведение ярлыка при нажатии кнопки.

  1. Примените его к своему 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())
    }
}

Комментарии:

1. Это заставляет кнопку занимать всю ширину и высоту — есть ли способ управлять этим без настройки фиксированных размеров?

2. Спасибо. Единственным недостатком является то, что он теряет active состояние, в котором непрозрачность кнопки уменьшается при ее нажатии. Не уверен, есть ли какой-либо способ решить это с помощью этого метода, хотя

3. @Zorgan Вы можете использовать configuration.isPressed , чтобы определить, нажата кнопка или нет, а затем действовать соответствующим образом.