【SwiftUI】HStackでViewを横に並べる

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

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

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

HはHorizontalの略で、「水平」を意味します。

HStack基本的な使い方

HStack {
   子View1
   子View2
   子View3
}

サンプルコード

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "star.fill")
                .font(.title)
                .foregroundColor(.yellow)
            Button("ボタンを押してね！") {
                // ボタンが押された時の処理
            }
            .font(.title)
        }
    }
}

#Preview{
    ContentView()
}

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

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

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

サンプルコード

struct ContentView: View {
    var body: some View {
        HStack(spacing: 40) {
            Text("Hello")
                .font(.system(size: 50))
                .background(Color.yellow)
            Text("World")
                .font(.system(size: 50))
                .background(Color.orange)
        }
    }
}

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

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

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

配置位置は.top .center .bottomの３種類あります。

サンプルコード

struct ContentView: View {
    var body: some View {
        VStack{
            // 配置場所：.top
            HStack(alignment: .top) {
                Text("Hello")
                    .font(.system(size: 70))
                    .background(Color.yellow)
                Text("World")
                    .font(.system(size: 30))
                    .background(Color.orange)
            }
            
            // 配置場所：.center
            HStack(alignment: .center) {
                Text("Hello")
                    .font(.system(size: 70))
                    .background(Color.yellow)
                Text("World")
                    .font(.system(size: 30))
                    .background(Color.orange)
            }
            .padding(.vertical)
            
            // 配置場所：.bottom
            HStack(alignment: .bottom) {
                Text("Hello")
                    .font(.system(size: 70))
                    .background(Color.yellow)
                Text("World")
                    .font(.system(size: 30))
                    .background(Color.orange)
            }
        }
    }
}