SwiftUIでToDoリストを作ろー！ 1

基本的には

ですが、動画を参考にSwift PlaygroundsでToDoリストを作りながら理解を深めます。

新規プロジェクトを作ります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
    }
}

縦並びのVStackを横並びのHStackに置き換えます。

  HStack{
            Image(systemName: "checkmark.circle")  
            Text("Hello")
            
        }

これで画像(SF Symbols)と文字とが横並びとなります。

次にNavigationStackを使ったリスト表示にします。基本は

  NavigationStack{
            List{
                  // リストの内容
            }
}

となるので、さっき作ったHStackを入れます。

    NavigationStack{
            List{
                HStack{
                    Image(systemName: "checkmark.circle")  
                    Text("Hello")
                    
                }
                
            } .navigationTitle("Todo List")
    }

.navigationTitle("Todo List")

でタイトルを入れます。List{}のコードの直下にモディファイア書きます。モディファイアは書く場所が大事です。タイトル名はTodo Listとしています。

今作っている"画像 + 文字"はリストの1行になり、これを複数行表示させることになるので、この1行表示の部分を別で定義して使い回しができるようにします。表示部分なのでViewプロトコルとして当たらすく構造体structを作ります。

ListRowView: View{} とします。

struct ListRowView: View {
    
    var body: some View {

            HStack{
                Image(systemName: "checkmark.circle")  
                Text("Hello")  

            }
    }  
}

そして ContentViewには ListRowView()を入れ込みます。

struct ContentView: View {
    
    var body: some View {
        
        NavigationStack{
            List{
                ListRowView()
                
            } .navigationTitle("Todo List")
        }
       
            
     }

これで最初に作ったリストと同じ表示が再現できます。