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

Вы когда-нибудь задумывались над тем, как сделать так, чтобы ваши view вышли за пределы экрана? Добавление теней позволяет придать элементам ощущение глубины и сделать их более заметными. SwiftUI предоставляет простые способы добавления теней к представлениям с помощью модификаторов.

Чтобы добавить тень к представлению, можно использовать модификатор shadow. Рассмотрим пример:

struct ContentView: View {
  var body: some View {
    Text("Hello, Shadows!")
      .font(.largeTitle)
      .padding()
      .background(Color.white)
      .shadow(radius: 10)
  }
}

struct ContentView: View {

  var body: some View {

    Text("Hello, Shadows!")

      .font(.largeTitle)

      .padding()

      .background(Color.white)

      .shadow(radius: 10)

  }

}

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

Пример использования тени в SwiftUI.

В этом примере вы добавили тень к текстовому представлению. Сначала был установлен размер шрифта в стиле LargeTitle и добавлен padding для создания некоторого пространства вокруг текста. Затем с помощью модификатора background к текстовому представлению был добавлен белый фон. И, наконец, добавили тень к тексту с помощью привязки модификатора shadow и указания радиуса тени.

Модификатор shadow принимает несколько параметров, которые можно использовать для настройки тени. Параметр radius задает радиус размытия тени, а параметры x и y — смещение тени в горизонтальном и вертикальном направлениях соответственно.

Цветные тени

Вы также можете управлять цветом тени. Попробуйте это сделать, добавив простую тень к фигуре:

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Hello, Shadows!")
        .font(.largeTitle)
        .padding()
        .background(Color.white)
        .shadow(radius: 10)
      Circle()
        .fill(Color.blue)
        .shadow(color: .purple, radius: 10, x: 0, y: 0)
        .padding(EdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10))
    }
  }
}

xxxxxxxxxx

struct ContentView: View {

  var body: some View {

    VStack {

      Text("Hello, Shadows!")

        .font(.largeTitle)

        .padding()

        .background(Color.white)

        .shadow(radius: 10)

      Circle()

        .fill(Color.blue)

        .shadow(color: .purple, radius: 10, x: 0, y: 0)

        .padding(EdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10))

    }

  }

}

​

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

Цветная тень в SwiftUI.

В этом примере мы создали синий круг и добавили к нему фиолетовую тень. Радиус тени задан равным 10, а смещение — 0 точек по горизонтали и вертикали (чтобы тень была по центру).

Добавление эффекта тени к представлению — это простой способ улучшить общий дизайн интерфейса, не перегружая его деталями. Начните экспериментировать с модификатором shadow в SwiftUI и посмотрите, как он может оживить ваш пользовательский интерфейс!

Предложите исправление: выделите текст и нажмите Ctrl+ Enter

← Предыдущая статья: Настройка фона и границ представления

Источник