Swiftでアプリ。- Todoリスト！ 1

リスト表示

Todoリストといえばリストなのでリストを表示する方法をまず確認しておきます。

まず基本的なことから。SwiftUIであれば簡単に表示させることができます。

List | Apple Developer Documentation

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        List {
            Text("A List Item")
            Text("A Second List Item")
            Text("A Third List Item")
        }
    }
}

これだけで

表示ができるようになります。これは、SwiftUIの構造体List()を使うと簡単に作ることができるということになります。

struct List<SelectionValue, Content> where SelectionValue : Hashable, Content : View

もっとスッキリさせます。

リストの中身の構造を規定してやり配列にその構造体で入れ込んでやります。
まず中身の構造を定義。

struct Ocean: Identifiable {
    let name: String
    let id = UUID()
}

これを使い配列に入れてまずスッキリ。

private var oceans = [
    Ocean(name: "Pacific"),
    Ocean(name: "Atlantic"),
    Ocean(name: "Indian"),
    Ocean(name: "Southern"),
    Ocean(name: "Arctic")
]

これを使ってList()に適応します。

var body: some View {
    List(oceans) {
        Text($0.name)
    }
}

全体としては

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        List(oceans) {
            Text($0.name)
        }
    }
}

struct Ocean: Identifiable {
    let name: String
    let id = UUID()
}

private var oceans = [
    Ocean(name: "Pacific"),
    Ocean(name: "Atlantic"),
    Ocean(name: "Indian"),
    Ocean(name: "Southern"),
    Ocean(name: "Arctic")
]

構造体"Ocean"は別ファイルで定義しても良いです

入力受付

VStack()とHStack()とZStack()を使ってざっと並べています。

struct ContentView: View {
    
    @State var todo = ""
    
    var body: some View {
        
        VStack{
            Text("Todo")
  
            HStack{
                TextField("追加してください！", text: $todo)
              
                Button(action: {}){
                    ZStack{
                        RoundedRectangle(cornerRadius: 5)
                        Text("add")

                    }
                }
            }       
        }
    }
}

表示は

となります。モディファイア追加してでいい感じにします。

    var body: some View {
        
        VStack{
            Text("Todo")
                .padding()
            
            HStack{
                TextField("追加してください！", text: $todo)
                    .textFieldStyle(.roundedBorder)
                    .frame(width: 300)
                
                Button(action: {}){
                    ZStack{
                      RoundedRectangle(cornerRadius: 5)
                            .frame(width: 50,height: 30)
                        Text("add")
                            .foregroundColor(.white)
                        
                    }
                }       
            }
            Spacer()

        }
    }

プレビューしてみると

入力欄とか幅(frame)、余白(padding)などで調整。あとSpacerで上の方に配置します。

リストを追加してみます。

List {
        Text("買物")
        Text("水やり")
        Text("運動")
}

としてプレビューすると

形になってきました。