MENU

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

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

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

サンプルコード

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)
            }
        }
    }
}

関連記事

SwiftUIが学べる書籍

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

Comment

コメントする

目次