wiftUI - Stack
안녕하세요.🙌
오늘은 SwiftUI로 스택을 만드는 법을 소개하겠습니다~
스택에는 세가지가 있습니다.
VStack
, HStack
, ZStack
이 있습니다.
하나씩 알아보겠습니다~
VStack
VStack은 Vertical Stack 입니다!
사용법은 역시나 간단합니다.
struct ContentView: View {
var body: some View {
VStack {
Text("하나")
Text("둘")
Text("셋")
}
}
}
Stack
은 alignment, spacing을 설정해줄 수 있습니다!
alignment의 디폴트는 center로 되어 있습니다. 그래서 위의 사진을 보면 가운데 정렬이 되어있는 것을 확인할 수 있습니다.
VStack
의 alignment는 leading
, center
, trailing
이 있습니다.
또한 Text
처럼 배경색, 패딩, 테두리 등 여러가지 설정을 해줄 수 있습니다!!
struct ContentView: View {
var body: some View {
// alignment, spacing 설정
VStack(alignment: .leading, spacing: 10) {
Text("하나")
Text("둘")
Text("셋")
}
.background(Color.yellow) // 배경색
.padding() // 패딩
.border(.blue, width: 2) // 테두리
}
}
HStack
HStack
사용법은 똑같습니다.
HStack
은 Horizontal Stack이겠죠?
현재로서 다른점은 alignment가 leading
, center
, trailing
이 아닌 top
, center
, bottom
이 있습니다.
struct ContentView: View {
var body: some View {
HStack(alignment: .top, spacing: 10) {
Text("하나\n일")
Text("둘")
Text("셋")
}
.background(Color.yellow)
.padding()
.border(.blue, width: 2)
}
}
ZStack
마지막으로 ZStack
입니다.
저는 ZStack
은 생소했는데요!
ZStack
은 앞으로 쌓인다? 겹친다?의 느낌입니다.
x, y, z 축할 때 z축 처럼 앞으로 겹치게 됩니다!
그래서 ZStack이 아닐까요..? 조심스럼게 예측해봅니다 ㅎ
코드를 보시면 이해하실 수 있을거에요!
struct CustomRectangleView: View {
var body: some View {
ZStack { // ZStack은 겹치는 스택 XYZ축 중에 Z축 방향으로 스택을 쌓아 나간다.
Rectangle() // 사각형을 만듦
.frame(width: 90, height: 90) // frame 설정
.foregroundColor(.yellow) // 도형색 설정
Rectangle()
.frame(width: 70, height: 70)
.foregroundColor(.purple)
Rectangle()
.frame(width: 50, height: 50)
.foregroundColor(.orange)
}
}
}
위 코드와 프리뷰를 보시면 먼저 변의 길이가 90인 정사각형 위에 변의 길이가 70인 정사각형, 그 위에 변의 길이가 50인 정사각형을 보실 수 있습니다.
이렇게 하나씩 넣을때마다 위에 겹치게 쌓는 스택입니다!!
나중에 다양하게 활용할 수도 있을 것 같아요!
오늘은 세가지 스택에 대해서 소개해보았습니다.
마지막으로 세가지 스택의 콜라보레이션 코드로 마치겠습니다.
// VStack, HStack
struct ContentView: View {
var body: some View {
VStack(alignment: .center, spacing: 20) { // alignment, spacing 설정
HStack {
CustomRectangleView()
CustomRectangleView()
CustomRectangleView()
}
HStack {
CustomRectangleView()
CustomRectangleView()
CustomRectangleView()
}
HStack {
CustomRectangleView()
CustomRectangleView()
CustomRectangleView()
}
}
.padding() // padding 설정
.background(Color.green) // 스택뷰의 배경색 설정
.cornerRadius(20) // 스택뷰 라운드 설정
}
}
// ZStack
struct CustomRectangleView: View {
var body: some View {
ZStack { // ZStack은 겹치는 스택 XYZ축 중에 Z축 방향으로 스택을 쌓아 나간다.
Rectangle() // 사각형을 만듦
.frame(width: 90, height: 90) // frame 설정
.foregroundColor(.yellow) // 도형색 설정
Rectangle()
.frame(width: 70, height: 70)
.foregroundColor(.purple)
Rectangle()
.frame(width: 50, height: 50)
.foregroundColor(.orange)
}
}
}
감사합니다~🙏
Author And Source
이 문제에 관하여(wiftUI - Stack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qudgh849/SwiftUI-Stack저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)