Вы когда-нибудь задумывались над тем, как сделать так, чтобы ваши view вышли за пределы экрана? Добавление теней позволяет придать элементам ощущение глубины и сделать их более заметными. SwiftUI предоставляет простые способы добавления теней к представлениям с помощью модификаторов.
Чтобы добавить тень к представлению, можно использовать модификатор shadow. Рассмотрим пример:
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))
}
}
}
Предварительный просмотр для этого представления должен выглядеть следующим образом:
Цветная тень в SwiftUI.
В этом примере мы создали синий круг и добавили к нему фиолетовую тень. Радиус тени задан равным 10, а смещение — 0 точек по горизонтали и вертикали (чтобы тень была по центру).
Добавление эффекта тени к представлению — это простой способ улучшить общий дизайн интерфейса, не перегружая его деталями. Начните экспериментировать с модификатором shadow в SwiftUI и посмотрите, как он может оживить ваш пользовательский интерфейс!
Предложите исправление: выделите текст и нажмите Ctrl+ Enter
← Предыдущая статья: Настройка фона и границ представления