Кнопка в SwiftUI: стили, настройки и лучшие практики

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

Создать кнопку в SwiftUI можно буквально в одну строку:

Button("Нажми меня!") { print("Кнопка нажата!") }

SwiftUI автоматически применяет стандартный стиль, адаптируя внешний вид кнопки под платформу.

Если кнопка содержит иконку, можно использовать SF Symbols:

Button("Играть", systemImage: "play.fill") { print("Запуск!") }

Кнопка в SwiftUI: стили, настройки и лучшие практики

А для пользовательских изображений:

Button { print("Кнопка нажата!") } label: { HStack { Image(systemName: "star.fill") .resizable() .scaledToFit() .frame(width: 50, height: 50) .foregroundColor(.yellow) Text("Нажми меня!") } }

SwiftUI предлагает несколько встроенных стилей:

Button("Нажми меня!") { print("Кнопка нажата!") } .buttonStyle(.borderedProminent) // Яркая кнопка с контуром .buttonBorderShape(.capsule) // Закругленная форма

.automatic — стиль по умолчанию, который SwiftUI выбирает автоматически в зависимости от платформы и контекста.
.borderless — кнопка без границ, часто используется в списках или текстовых кнопках.
.bordered — стандартная кнопка с рамкой, подходящая для обычных действий.
.borderedProminent — яркая кнопка с акцентной заливкой, идеально подходит для ключевых действий (например, кнопка «Купить»).

.automatic - SwiftUI автоматически выбирает форму границы, соответствующую контексту.
.capsule - закругленная кнопка в виде капсулы, часто используется для главных действий.
.circle - кнопка в форме круга, удобна для иконок или действий, например, кнопка «+» для добавления.
.roundedRectangle(radius:) - прямоугольная кнопка со скругленными углами, где можно задать радиус скругления вручную.

SwiftUI позволяет обозначать роль кнопки, чтобы система автоматически применяла стилистические особенности:

Button("Удалить", role: .destructive) { print("Удаление данных") }

Доступные роли:

.destructive — красная кнопка для критических действий
.cancel — кнопка отмены

Если стандартные стили вам не подходят, можно создать свой:

Применение стиля:

Button("Продолжить") { print("Кнопка нажата!") } .buttonStyle(PrimaryButtonStyle())

Чтобы добавить автодополнение в Xcode, можно расширить ButtonStyle:

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

Теперь стиль можно применять так:

Button("Продолжить") { print("Кнопка нажата!") } .buttonStyle(.primary)

🔹 Используйте Button, а не TapGesture, чтобы автоматически поддерживать доступность.

🔹 Применяйте системные стили (.borderedProminent, .capsule) для лучшего UI/UX.

🔹 Роли кнопок (.destructive, .cancel) делают интерфейс интуитивно понятным.

🔹 Создавайте переиспользуемые стили кнопок через ButtonStyle.

🔹 Избегайте избыточных эффектов, если это не улучшает пользовательский опыт.

SwiftUI предоставляет мощные инструменты для работы с кнопками — от простых стандартных вариантов до полностью кастомных стилей и взаимодействий. Используйте встроенные API, создавайте переиспользуемые компоненты и следуйте лучшим практикам, чтобы сделать интерфейс удобным и интуитивным.

Кнопка в SwiftUI: стили, настройки и лучшие практики

🔹 Создание базовой кнопки

🎨 Использование стандартных стилей кнопок

Доступные варианты .buttonStyle:

Формы .buttonBorderShape:

🎭 Роли кнопок (Button Roles)

✨ Создание кастомного стиля кнопки

✅ Лучшие практики при работе с кнопками в SwiftUI

🔥 Заключение