本項の締めくくりとして、スクロールできるオブジェクトを導入したいと思います。スクロールができると画面に収まらない要素を閲覧できるようになります。包んだ要素をスクロールできるようにする ScrollView を紹介します。

  • 前回のコードに続けて書く
  • Image( “CC0_01” )を ScrollView で包む
  • ScrollViewの中のImageを4つに増やす

ScrollViewは標準で画面めいっぱいになるように調整されます。その結果、ScrollViewより前に記述してあるHStackやDividerは画面上に寄ります。プレビューを実行状態にすると並んだ画像をスクロールできます。

コード

 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
31
32
33
34
35
36
37
38
39
40
41

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text( "あいうえお" )
                .font( .title )
                
                Spacer()
                
                Image( systemName:"gearshape" )
                .foregroundStyle( .blue )
                .font( .title2 )
            }
            
            Divider()
            .background( .gray )
            .padding( .vertical, 20.0 )
            
            ScrollView {
                Image( "CC0_01" )
                .resizable()
                .scaledToFit()
            
                Image( "CC0_02" )
                .resizable()
                .scaledToFit()
                
                Image( "CC0_03" )
                .resizable()
                .scaledToFit()
                
                Image( "CC0_04" )
                .resizable()
                .scaledToFit()
			}
        }
        .padding( .horizontal, 20.0 )
    }
}

結果

swiftui_1_3_8_1.png