Nền
Thuộc phần Giới thiệu về SwiftUI trong hành trình Swift của Coddy. Bài học 15 trên 50.
.background vẽ một màu phía sau khung hiển thị. Màu này phủ kín vùng của khung hiển thị, vì vậy phần đệm làm vùng có màu lớn hơn phần văn bản:
Text("New")
.padding()
.background(.red)
.foregroundStyle(.white)Để bo tròn các góc của vùng màu, hãy cắt vùng đó theo một hình bằng .clipShape. RoundedRectangle(cornerRadius: 8) tạo các góc bo tròn, còn Capsule() tạo hai đầu tròn hoàn toàn:
Text("Tag")
.padding(8)
.background(.blue)
.clipShape(RoundedRectangle(cornerRadius: 8))
Thử thách
DễBiến văn bản thành huy hiệu: thêm khoảng đệm tiêu chuẩn, nền đỏ và chữ màu trắng.
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