【SwiftUI】Webリンクテーブルを作る方法 (工事中)

はじめに

アプリ固定で持つリンクのテーブルデータを表示したい場合のやつです

通信で取得して云々ではないので注意。

テーブルデータの前提

SwiftUIのテーブルデータはIdentifiable を継承したstructで作る必要があります

色々理由はあるんですが、そこは気にせずSwiftUIのテーブルは Identifiable を使うだけ覚えておけばOK

Identifiableを継承することでidという変数を必ず宣言しないといけません。

今回やりたいことで idを使うというわけではないので、

 var id = UUID()

としておきましょう。

UUID()は一意の値を生成する = かぶらない値

テーブルデータの仕様決め

変数	用途
name	セルに表示される名前(リンク)
url	セルをクリックした時に飛び先(外部サイト)
icon	セルの画像表示で使うAsset名

それを踏まえた構造体はこんな感じになりました。

struct linkData: Identifiable {
    var id = UUID()
    var name: String
    var url: String
    var icon: String
}

テーブルを作る

webDataの配列を作ればいい

let linkList = [
    linkData(name: "au公式", url: "https://www.au.com/", icon: "icon_au"),
    linkData(name: "docomo公式", url: "https://www.docomo.ne.jp/", icon: "icon_docomo"),
    linkData(name: "softbank公式", url: "https://www.softbank.jp/", icon: "icon_softbank"),
]

Listでテーブルを表示

struct ContentView: View {
        
    var body: some View {
        
        NavigationView {

            List(linkList) { item in
                
                HStack {
                    // アイコン
                    Image(item.icon)
                        .resizable()
                        .frame(width:40, height:40)
                    
                    Link(item.name, destination: URL(string: item.url)!)
                }
            }.navigationTitle("リンク")

        }.navigationViewStyle(.stack)
    }
}

今回は直書きでやりましたセルに相当する部分は他ビューで定義してもいいかもしれませんね。