前回、View部品に値を渡せるようにしました。渡す値を増やすこともできます。

  • 前回のコードに続けて書く

  • SceneryRowに変数 imageName:String を追加

    • imageNameの文字列はAssetsにある画像名

  • Image( imageName )を追加

    • Text( title )の前に置く
    • 大きさ調整のコード .resizable(), .scaledToFit() を追加
    • 元画像が大きいので .frame( maxHeight:80 ) で縦幅を最大80ptに収める

コード1

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

import SwiftUI

struct SceneryRow : View {
    var imageName: String
    var title: String
    
    var body: some View {
        HStack {
            Image( imageName )
            .resizable()
            .scaledToFit()
            .frame( maxHeight:80 )
            
            Text( title )
        }
    }
}

SceneryRowに初期値のないimageName変数を追加したのでSceneryRowに渡す値にimageNameを増やします。

コード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( imageName:"CC0_01", title:"景色1" )
                SceneryRow( imageName:"CC0_04", title:"景色2" )
                SceneryRow( imageName:"CC0_06", title:"景色3" )
                SceneryRow( imageName:"CC0_07", title:"景色4" )
                SceneryRow( imageName:"CC0_10", title:"景色5" )
            }
        }
        .listStyle( .grouped )
    }
}

SceneryRowのImage部分にAssetsの名前の画像が表示されます。

結果

swiftui_2_3_3_1.png