0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[SwiftUI macOS アプリ] NavigationView List 要素を削除 / さらに一番上に要素追加する

Last updated at Posted at 2020-07-12

まずは削除のサンプルです。

スクリーンショット 2020-07-12 18.49.03.png

サイドバーのリスト選択中に remove を押すと、nothing の表示になります。

ContentView.swift
import SwiftUI

struct Person: Identifiable, Hashable {
    var name: String
    var id = UUID()
}

struct ContentView: View {
    
    @State var persons = [
        Person(name: "taro"),
        Person(name: "yuki"),
        Person(name: "hoge")
    ]
    
    @State private var selectedPerson: Person?
    var body: some View {
        VStack {
            Button("remove", action: {
                print(self.selectedPerson)
                if self.selectedPerson == nil {
                    return
                }
                self.persons.removeAll(where: {$0.id == self.selectedPerson!.id})
                self.selectedPerson = nil
            })
            NavigationView {
                List(persons, id: \.self, selection: $selectedPerson) { person in
                    Text(person.name)
                }.frame(width: 150)

                if selectedPerson != nil {
                    Detail(person: selectedPerson!)
                } else {
                    Text("nothing").frame(maxWidth: .infinity, maxHeight: .infinity)
                }
            }.frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

struct Detail: View {
    var person: Person
    var body: some View {
        Text(person.name).frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

さらに追加もしてみます。

並び順を考慮し、一番上に要素をいれます。

スクリーンショット 2020-07-12 19.25.00.png
ContentView.swift
import SwiftUI

struct Person: Identifiable, Hashable {
    var name: String
    var id = UUID()
    var order: Int
}

struct ContentView: View {
    
    @State var persons = [
        Person(name: "taro", order: 2),
        Person(name: "yuki", order: 1),
        Person(name: "hoge", order: 0)
    ]
    
    @State private var selectedPerson: Person?
    var body: some View {
        VStack {
            HStack {
                AddButton(persons: $persons, selected: $selectedPerson)
                Button("remove", action: {
                    print(self.selectedPerson)
                    if self.selectedPerson == nil {
                        return
                    }
                    self.persons.removeAll(where: {$0.id == self.selectedPerson!.id})
                    self.selectedPerson = nil
                })
            }
            NavigationView {
                List(persons.sorted{$0.order > $1.order}, id: \.self, selection: $selectedPerson) { person in
                    Text(person.name)
                }.frame(width: 150)

                if selectedPerson != nil {
                    Detail(person: selectedPerson!)
                } else {
                    Text("nothing").frame(maxWidth: .infinity, maxHeight: .infinity)
                }
            }.frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

struct AddButton: View {
    @Binding var persons: [Person]
    @Binding var selected: Person?
    var body: some View {
        Button("add", action: {
            let names = ["foo", "bar", "baz", "tao", "tee"]
            let newPerson = Person(name: names.randomElement()!, order: self.persons.count)
            self.persons.append(newPerson)
            self.selected = newPerson
        })
    }
}

struct Detail: View {
    var person: Person
    var body: some View {
        Text(person.name).frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?