[SwiftUI] 여러개의 스택을 이용한 레이아웃 UI만드는 방법 예제
HStack, VStack, ZStack을 중첩해서 사용하여 SwiftUI에서 뷰를 구성하는 예제
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("도형만들기").font(.largeTitle).fontWeight(.heavy)
HStack {
Text("둥근 모양").font(.title)
Spacer()
}
ZStack {
Rectangle().frame(height:10)
HStack {
Circle().fill(Color.yellow)
Ellipse().fill(Color.green) // 타원
Capsule().fill(Color.orange) // 캡슐
RoundedRectangle(cornerRadius: 30).fill(Color.gray) // 둥근 모서리 사각형
}
}
HStack {
Text("각진 모양").font(.title)
Spacer()
}
ZStack{
Rectangle().frame(height: 10) // 배경선
HStack{
Color.red // 컬ㄹ러 그 자체도 하나의 뷰로 본다.
Rectangle().fill(Color.blue)
RoundedRectangle(cornerRadius: 0).fill(Color.purple)
// CornorRadius를 0으로 준 사각형
}
}
}
}
}
[프리뷰 결과]
스위프트UI에서는 컬러(Color.red) 그 자체도 하나의 뷰로 취급합니다.
화면 UI는 많이 구성해보고 연습이 필요한 부분입니다.
위 포스팅 내용들은 “스윗한 SwiftUI(이봉원 지음)” 전자책을 보고 스터디 및 실습한 내용들을 기록하였습니다.