コンテンツに分割線を入れると見やすくなることがあります。 SwiftUIで分割線を表示するときは Divider を使います。

  • 前回のコードに続けて書く
  • Text( “あいうえお” )と Image( “CC0_01” ) の間に Divider() を追加する
  • Divider()に .padding を追加、分割線の上下の余白を調整する
    • .padding( .vertical, 20.0 ) : オブジェクトの上下に20ptの余白
  • .background を設定する
    • Dividerの線の色は背景色で指定する

コード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "あいうえお" )
            .font( .title )
            
            Divider()
            .background( .gray )
            .padding( .vertical, 20.0 )
            
            Image( "CC0_01" )
            .resizable()
            .scaledToFit()
        }
        .padding( .horizontal, 20.0 )
    }
}

結果

swiftui_1_3_4_1.png