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 の Detail 画面で TextField を使うサンプル(Optional Binding)

Last updated at Posted at 2020-07-12
スクリーンショット 2020-07-12 20.30.58.png

ポイントはオプショナルをバインディングするところです。extension を追加しています。

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.bound)
                } 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
        })
    }
}

extension Optional where Wrapped == Person {
    var _bound: Person? {
        get { return self }
        set { self = newValue }
    }
    
    var bound: Person {
        get { return _bound ?? Person(name: "", order: 9999) }
        set { _bound = newValue }
    }
}

struct Detail: View {
    @Binding var person: Person
    var body: some View {
        VStack {
            TextField("", text: $person.name)
            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?