Поваренная книга SwiftUI: создание круглого представления в SwiftUI

Хотите создать стильный круглый View в SwiftUI? Этого можно легко добиться с помощью встроенных модификаторов вида. В SwiftUI можно легко изменить форму представления, используя предопределенные формы, такие как Circle, Capsule или Rectangle.

Чтобы создать круглый вид, достаточно использовать форму Circle и настроить ее свойства.

struct ContentView: View {
  var body: some View {
    Text("Hello,\nCircular View!")
      .multilineTextAlignment(.center)
      .padding(50)
      .foregroundColor(.white)
      .background(Circle().fill(.blue))
  }
}

Предварительный просмотр для этого представления должен выглядеть следующим образом:

Круглое представление в SwiftUI.

В приведенном выше примере в качестве фона текстового представления использовалась фигура Circle. Кроме того, для фигуры Circle был задан модификатор fill, который заливает ее синим цветом.

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

Если необходимо изменить размер кругового представления, можно изменить модификатор frame фигуры Circle.

struct ContentView: View {
  var body: some View {
    Text("Hello,\nCircular View!")
      .multilineTextAlignment(.center)
      .padding(50)
      .foregroundColor(.white)
      .background(
        Circle()
          .fill(Color.blue)
          .frame(width: 200, height: 200)
      )
  }
}

Теперь предварительный просмотр для этого View должен выглядеть следующим образом:

В приведенном выше примере мы задали модификатору frame формы Circle фиксированный размер ширины и высоты, равный 200 точкам. В результате мы получим круглое представление диаметром 200 точек.

← Предыдущая статья: Настройка прозрачности

Источник