Spacer 및 ZStack
Coddy Swift 여정의 SwiftUI 입문 섹션에 포함된 레슨. 50개 중 12번째.
Spacer는 스택에서 사용 가능한 모든 공간을 차지합니다. HStack에서는 앞에 있는 뷰를 왼쪽으로, 뒤에 있는 뷰를 오른쪽으로 밀어냅니다:
HStack {
Text("Total")
Spacer()
Text("$12.50")
}VStack에서 Spacer는 뷰 사이를 세로 방향으로 벌립니다.
ZStack은 뷰를 서로 겹쳐서 쌓습니다. 첫 번째 뷰가 뒤에 놓이고, 그다음 뷰는 각각 그 위에 놓입니다:
ZStack {
Color.blue
Text("On top")
.foregroundStyle(.white)
}뷰로 사용된 Color.blue는 주어진 모든 공간을 채우므로, 여기서는 텍스트 뒤의 파란색 배경이 됩니다.
챌린지
쉬움합계 행이 전체 너비에 걸치도록 만드세요: Total과 $12.50 사이에 Spacer를 추가하여 가격이 오른쪽 가장자리로 밀려나도록 하세요.
직접 해보기
import SwiftUI
@main
struct CoddyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
SwiftUI 입문의 모든 레슨
직접 연습해 보세요: Swift 플레이그라운드