🔖

学生初心者FlutterエンジニアがSwiftUIでまず作ったもの

2023/12/26に公開

最近CATechAccelでSwiftUIを触ることになった学生エンジニアがアウトプットの場として、何を作ったのかここに書いていこうと思います!


まずは定番のToDoアプリ。
これはおそらくほぼ全ての人がプログラミングを学習していく上で通る道だとは思います。
localDBやFirebase,Supabaseに保存するものが多いでしょう。
しかし、その前にもう一つ階段がほしい!みたいな方にとっては今回の記事は向いているかもしれません!

今回作成するのはDBを一切使わないTodoアプリ!

なんや、ToDoアプリやん!なんやあほくさ、って思ったそこのあなた!あなたもしかして関西人ですね?!

冗談はさておき、すごく簡単なのでぜひ見てもらえると嬉しいです!


C(Create)
R(Read)
U(Update)
D(Delete)

というわけで実際のコードを見てみましょう!

contentview
import SwiftUI

struct ContentView: View {
    @State public var tasklist = [Task]()
    @State var TaskTitle: String = ""
    
    var body: some View {
        VStack {
            List{
                ForEach(tasklist) { task in
                    Text(task.title)
                }
                .onDelete(perform: listRemove)
            }
            
            TextField("make your task", text: $TaskTitle)
            HStack{
                Spacer()
                Button(action: {
                    let task = Task(title: TaskTitle)
                    if TaskTitle != "" {
                        tasklist.append(task)
                        TaskTitle = ""
                    }
                    TaskTitle = ""
                }) {
                    Image(systemName: "plus.circle.fill")
                        .resizable()
                        .frame(width: 60, height: 60)
                }
            }
        }
        .padding()
    }
    func listRemove(offsets: IndexSet){
        tasklist.remove(atOffsets: offsets)
    }
}


#Preview {
    ContentView()
}

Task
import Foundation

struct Task: Identifiable {
    let id = UUID()
    let title: String
}

ここで何をしているのか簡単に説明していきます。
まずは、DBを作っていないのでインスタンスを作ります

@State public var tasklist = [Task]()

ここで初期化を行い、

TextField("make your task", text: $TaskTitle)
            HStack{
                Spacer()
                Button(action: {
                    let task = Task(title: TaskTitle)
                    if TaskTitle != "" {
                        tasklist.append(task)
                        TaskTitle = ""
                    }
                    TaskTitle = ""
                }) {
                    Image(systemName: "plus.circle.fill")
                        .resizable()
                        .frame(width: 60, height: 60)
                }
            }

ここで追加していきます。
また、

.onDelete(perform: listRemove)

func listRemove(offsets: IndexSet){
        tasklist.remove(atOffsets: offsets)
    }

ここで削除するメソッドを作成しています!
そうすることでスワイプによる削除ができるようになります!!

今回のアプリは、タスクキルしてしまうと保存していたインスタンスが消えてしまうのでこれを踏み台に完全なToDoアプリを作ってみてください!

私が初心者ということもあり、至らぬ部分もあると思うのでコメントで指摘していただけると幸いです!

Jboy王国メディア

Discussion