Мобильный трудоголик: “Как изменить форму стеклянных кнопок в SwiftUI. В iOS 26 появились нов…”

Как изменить форму стеклянных кнопок в SwiftUI.

В iOS 26 появились новые Liquid Glass API, включая стиль кнопок .glass. Это сделало кнопки более современными и визуально привлекательными. Но есть один нюанс: вне навигационной панели стеклянная кнопка по умолчанию отображается в виде капсулы. Для текстовых кнопок это хорошо, но для иконок часто хочется сделать круглую форму. У Apple есть готовое решение и это не кастомный стиль.

В чем суть проблемы:

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

Можно попытаться обрезать кнопку через .clipShape(.circle), но это не совсем то, что нужно. Обрезка применяется после того, как стиль уже отрисовал кнопку. Эффекты, материалы, подсветка и hover-состояния могут работать некорректно.

Верное решение - buttonBorderShape:

В SwiftUI есть модификатор buttonBorderShape, который задает форму системной плашки кнопки. Он работает с системными стилями, включая .glass.

Button {
    // Действие
} label: {
    Image(systemName: "sun.max")
}
.buttonBorderShape(.circle)
.buttonStyle(.glass)

Это не обрезка, а указание системе, какую форму использовать для кнопки. Все эффекты и состояния сохраняются.

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

Модификатор поддерживает несколько предустановленных форм:

🔵.automatic - система решает сама.

🔵.capsule - капсула, подходит для текстовых кнопок.

🔵.circle - круг, хорош для иконок.

🔵.roundedRectangle - скругленный прямоугольник.

🔵.roundedRectangle(radius: 12) - с заданным радиусом.

Можно применять модификатор как к отдельной кнопке, так и к контейнеру. Если повесить на HStack, все кнопки внутри получат одинаковую форму.

HStack {
    Button { ... } label: { Image(systemName: "sun.max") }
    Button { ... } label: { Image(systemName: "moon") }
}
.buttonBorderShape(.circle)
.buttonStyle(.glass)

🔗 Читать подробнее

💡 Вывод:

.buttonStyle(.glass) дает современный вид, но форма по умолчанию - капсула. Для иконок это не всегда хорошо. Решение - .buttonBorderShape(.circle). Это старый модификатор, но в контексте стеклянных кнопок он работает идеально и не нужно писать кастомный стиль.

Подписаться на канал:
➡️ Telegram | Max