【SwiftUI】VStackでViewを縦に並べる

2023年11月26日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

SwiftUIにおいて、TextやImageなどのViewを縦に並べるにはVStackを使います。

VはVerticalの略で、「垂直」を意味します。

VStackの基本的な使い方

VStack {
   子View1
   子View2
   子View3
}

サンプルコード

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello")
                .font(.system(size: 100))
                .frame(width:300)
                .background(Color.yellow)
            Text("World")
                .font(.system(size: 50))
                .frame(width:300)
                .background(Color.orange)
        }
    }
}

VStack内の子ビューの間隔を調整するには？

子ビューの間隔を調整するには、spacing プロパティを使用します。

VStack(spacing: 子View同士の間隔) {
   子View1
   子View2
   子View3
}

サンプルコード

struct ContentView: View {
    var body: some View {
        VStack(spacing: 50) {
            Text("Hello")
                .font(.system(size: 100))
                .frame(width:300)
                .background(Color.yellow)
            Text("World")
                .font(.system(size: 50))
                .frame(width:300)
                .background(Color.orange)
        }
    }
}

VStackでの配置指定を変更するには？

VStack内での配置位置を変更するには、alignmentプロパティを使用します。

VStack(alignment: 配置位置) {
   子View1
   子View2
   子View3
}

配置位置は.leading .center.trailingの３種類あります。leadingは左寄せ、trailingは右寄せです。

サンプルコード

struct ContentView: View {
    var body: some View {
        VStack(alignment:.leading) {
            Text("Hello")
                .font(.system(size: 100))
                .frame(width:400)
                .background(Color.yellow)
            Text("World")
                .font(.system(size: 50))
                .frame(width:600)
                .background(Color.orange)
        }
        .background(Color.gray)
    }
}