В SwiftUI есть удобный встроенный модификатор cornerRadius, который позволяет легко создавать закругленные углы представления. Применяя модификатор cornerRadius к виду Rectangle, вы можете преобразовать его в скругленный прямоугольник. Значение, которое вы указываете модификатору, определяет степень эффекта округления.

Rectangle()
    .cornerRadius(10.0)

В качестве альтернативы SwiftUI также предоставляет стандартное представление RoundedRectangle для создания скругленного прямоугольника:

RoundedRectangle(cornerRadius: 25.0)

К сожалению, и модификатор cornerRadius, и вид RoundedRectangle могут применять только один и тот же угловой радиус ко всем углам фигуры.

Что делать, если вам нужно закруглить определенный угол вида?

В iOS 17 инфраструктура SwiftUI представляет новое представление под названием UnevenRoundedRectangle. Что отличает этот вид, так это возможность указать отдельное значение радиуса для каждого угла, что позволяет разработчикам создавать формы с широкими возможностями настройки.

Примечание. У нас есть учебник по UIKit, показывающий, как скруглить определенные углы.

Работа с UnevenRoundedRectangle

С помощью UnevenRoundedRectangle вы можете легко создавать прямоугольные формы с закругленными углами разных радиусов. Чтобы использовать UnevenRoundedRectangle, вам просто нужно указать угловой радиус для каждого угла. Вот пример:

UnevenRoundedRectangle(cornerRadii: .init(
                          topLeading: 50.0, 
                          bottomLeading: 10.0, 
                          bottomTrailing: 50.0, 
                          topTrailing: 30.0), 
                          style: .continuous)
    .frame(width: 300, height: 100)
    .foregroundStyle(.indigo)

По желанию можно указать стиль углов. Угловой стиль continuous придаст углам более гладкий вид. Если вы поместили приведенный выше код в Xcode 15, вы можете создать прямоугольную форму, как показано ниже.

Вы можете использовать эту фигуру и преобразовать ее в кнопку с помощью модификатора backgroundmodifier. Вот пример фрагмента кода:

Button(action: {
 
}) {
    Text("Register")
        .font(.title)
}…