VStackで縦方向, HStackで横方向に並べてみました。次は上に重ねていくZStackを紹介します。以下のように前回のコードに追加していきます。

  • VStackをZStackで包む
  • 次にColor()を追加。Colorは色オブジェクトで背景の色を塗ってくれる
  • Colorに続いて前回のVStack{ … }を置く

コード

 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
27
28
29
30

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color( .sRGB, red:0.2, green:0.3, blue:0.2, opacity:1.0 ) 
           
            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_7_1.png