Spacer и ZStack
Часть раздела Введение в SwiftUI путешествия по Swift на Coddy. Урок 12 из 50.
Spacer занимает всё свободное пространство в стеке. В HStack он сдвигает представления перед собой влево, а представления после него — вправо:
HStack {
Text("Total")
Spacer()
Text("$12.50")
}В VStack элемент Spacer раздвигает представления по вертикали.
ZStack размещает представления слоями одно поверх другого. Первое представление находится сзади, а каждое следующее располагается поверх него:
ZStack {
Color.blue
Text("On top")
.foregroundStyle(.white)
}При использовании в качестве представления Color.blue заполняет всё предоставленное ему пространство, поэтому здесь он становится синим фоном за текстом.
Задание
ЛегкоСделайте строку с итоговой суммой по всей ширине: добавьте Spacer между Total и $12.50, чтобы цена была выровнена по правому краю.
Попробуйте сами
import SwiftUI
@main
struct CoddyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Введение в SwiftUI
10Проект — Coddy Coffee
Обзор проектаЭкраны напитков
Выбор размераКоличество и итоговая суммаОформление заказа2Отображение содержимого
Текстовые представленияЧисла в текстеШрифтыЦветаSF SymbolsПовторение — ценник5Состояние и кнопки
КнопкиСвойство @StateСостояние «истина или ложь»Условные представленияПовторение — счётчик очков6Ввод данных пользователем
Текстовое полеПереключательСчётчик и ползунокВыборПовторение — форма заказаПотренируйтесь самостоятельно: Песочница Swift