VStackがオブジェクトを縦に並べたように、横に並べるためのオブジェクトが HStack です。 前回のコードを以下の手順で書き換えます。

  • VStackの中に、HStackを追加、さらに以下のようにコードを書く
    • 既存のImage( systemName:“globe” ) をHStackの中に入れる
    • Spacer(), Image( systemName:”info.circle” )を追加する

コード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Image( systemName:"globe" )
                .imageScale(.large)
                .foregroundColor(.accentColor)
                .padding()
            
                Spacer()
                
                Image( systemName:"info.circle" )
                .imageScale(.large)
                .foregroundColor( .blue )
                .padding()
            }
            
            Spacer()
            
            Text( "こんにちわ" )
            .padding()
        }
    }
}

結果

swiftui_1_1_6_1.png