前回までに複数の画面の行き来とListを説明しました。画面はViewによって作れることは紹介しましたが、画面の一部もViewです。よって部品も画面全体と同様にカスタマイズできます。今回はListの1項目にあたるView部品を自作してみます。

  • SFSwiftUI02-3.swiftpm を開く (サンプルコード)

  • View部品にするswiftファイルを追加する

    • ファイルリストで右クリック, New Fileを選択して新しいファイルを作る
    • File.swiftを SceneryRow.swift に変更する

swiftui_2_3_1_1.png

  • SceneryRow.swiftに以下のコードを記述する

コード1

1
2
3
4
5
6
7
8
9

import SwiftUI

struct SceneryRow : View {
    var body: some View {
        HStack {
            Text( "景色" )
        }
    }
}
  • ContentViewを開く
  • List内にSection( “景色情報” )を作り、その中に SceneryRow を5つ書く

コード2

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

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section( "景色情報" ) {
                SceneryRow()
                SceneryRow()
                SceneryRow()
                SceneryRow()
                SceneryRow()
            }
        }
        .listStyle( .grouped )
    }
}

結果

swiftui_2_3_1_2.png