Spacer và ZStack
Thuộc phần Giới thiệu về SwiftUI trong hành trình Swift của Coddy. Bài học 12 trên 50.
Spacer chiếm toàn bộ khoảng trống trong một ngăn xếp. Trong HStack, nó đẩy các khung nhìn phía trước sang trái và các khung nhìn phía sau sang phải:
HStack {
Text("Total")
Spacer()
Text("$12.50")
}Trong VStack, Spacer đẩy các khung nhìn ra xa nhau theo chiều dọc.
ZStack xếp chồng các khung nhìn lên nhau. Khung nhìn đầu tiên nằm phía sau, mỗi khung nhìn tiếp theo nằm phía trên:
ZStack {
Color.blue
Text("On top")
.foregroundStyle(.white)
}Color.blue khi dùng làm một view sẽ lấp đầy toàn bộ không gian được cấp, vì vậy ở đây nó trở thành nền màu xanh phía sau văn bản.
Thử thách
DễĐể hàng tổng cộng trải dài hết chiều rộng: thêm Spacer giữa Total và $12.50 để đẩy giá sang sát mép phải.
Tự làm thử
import SwiftUI
@main
struct CoddyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Giới thiệu về SwiftUI
Tự luyện tập: Playground SwiftUI