MENU

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

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

SwiftUIにおいて、TextImageなどの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の3種類あります。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)
    }
}

関連記事

SwiftUIが学べる書籍

Share
  • URLをコピーしました!

Comment

コメントする

目次