ButtonStyle в SwiftUI

SwiftUI предоставляет мощный способ создания и настройки представлений с использованием протоколов стилей. Эти протоколы позволяют нам определить внешний вид наших представлений в одной строке кода.

В результате представления визуально согласованы, что делает приложение более простым в использовании и более привлекательным.

Стилизация кнопки без ButtonStyle

Мы могли бы стилизовать нашу кнопку, применяя к ней различные модификаторы. Рассмотрим этот пример:

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

Этот подход вполне удобен, если вы разрабатываете одну кнопку. Но если вам нужно разработать несколько кнопок с одинаковым стилем, вам нужно использовать ButtonStyleпротокол. Это поможет поделиться и применить один и тот же стиль к разным кнопкам в приложении.

Стилизация кнопки с помощью ButtonStyle

Давайте создадим наш пользовательский стиль кнопки с именем PrimaryButtonStyle. Этот стиль используется для основных кнопок во всем приложении.

Давайте посмотрим на этот пример:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

Чтобы применить созданный стиль кнопки, попробуйте написать это:

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

КнопкаСтильКонфигурация

Объект конфигурации кнопки имеет несколько свойств, в том числе isPressedлогическое значение, указывающее, нажата ли кнопка в данный момент. Мы могли бы использовать это, чтобы изменить стиль нашей кнопки, когда пользователь нажимает кнопку. Для этого мы могли бы написать что-то вроде этого:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

Профессиональный совет

Наш код можно сделать чище и читабельнее, добавив следующее расширение к PrimaryButtonStyle:

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

С помощью ButtonStyleмы можем определить внешний вид, макет и взаимодействие кнопки и обеспечить согласованность во всем приложении.

Кроме того, он предоставляет способ инкапсулировать логику и стили, связанные с кнопками, в повторно используемые компоненты. Это делает кодовую базу более удобной в сопровождении и масштабируемой.

Спасибо за прочтение!

Если вы считаете эту статью полезной, обязательно похлопайте ей, чтобы другим было легче найти ее.