SwiftData list bindings with @Query

Question

Since Swift 5.5 we could create SwiftUI lists with bindings like this (e.g. see this answer):

class Item {
    // ...
    var isOn: Bool
}

struct ContentView: View {
    @State private var items: [Item] = []
    var body: some View {
        NavigationView {
            List {
                ForEach($items) { $item in     // <--- list binding
                    Toggle(isOn: $item.isOn) {
                        Text("Vibrate on Ring")
                    }
                }
            }
        }
    }
}

Now I want to do something similar with SwiftData but I get an error:

struct ContentView: View {
    @Environment(\.modelContext) private var modelContext
    @Query private var items: [Item]
    var body: some View {
        NavigationView {
            List {
                ForEach($items) { $item in //   <--- Cannot find '$items' in scope
    // ...

How can I render a list of SwiftData objects that allows inline editing of objects through bindings?

You have to use Bindable with the new frameworks. – lorem ipsum Jun 13 '23 at 12:23 — lorem ipsum, Jun 13 '23 at 12:23

score 7 · Answer 1 · answered Jun 13 '23 at 12:58

7

The easiest solution I found is to use @Bindable and to separate the Query macro and the Bindable into different views.

An example

struct ItemRow: View {
    @Bindable var item: Item
   
    var body: some View {
        HStack {
            Text(item.name)
            Toggle(isOn: $item.isOn) // Notice the $
        }
    }
}

Calling view

struct ContentView: View {
    @Environment(\.modelContext) private var modelContext
    @Query private var items: [Item]
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    ItemRow(item: item)
     //...
}

answered Jun 13 '23 at 12:58

Joakim Danielson

43,251
5
22
52

This is beta, requires SwiftData and the new OS versions coming fall 2023. – Hardy Jun 24 '23 at 07:58
1

Yes of course, the whole question is about beta versions so what is your point? – Joakim Danielson Jun 24 '23 at 07:59
It's just to clarify, as this may not be obvious to everyone. – Hardy Jun 24 '23 at 11:25
Ok but why not clarify that for the whole question then, that’s what made me react. – Joakim Danielson Jun 24 '23 at 11:39
1

You're right, that's true... – Hardy Jun 24 '23 at 17:07

Ranoiaetep · Accepted Answer · 2023-06-13T13:29:38.553

7

You can utilize the new Bindable, which has a subscript operator to wrap the underlying data into a binding variable:

ForEach(items) { item in
    Toggle(isOn: Bindable(item).isOn) { ... }
}

edited Jun 13 '23 at 13:29

answered Jun 13 '23 at 13:24

Ranoiaetep

5,872
1
14
39

Correct, it's even in the docs although its on 2 lines instead of 1. – malhal Jun 13 '23 at 20:23
1

Hi, malhal. Do you have a link to that example in the documentation? – Mikiko Jane Jul 16 '23 at 20:04

Md Sakibul Alam Utchas · Answer 3 · 2023-07-07T06:08:54.767

Swift Bindable Structure can be used like the example given below.

import SwiftUI
import SwiftData

struct ContentView: View {
    @Environment(\.modelContext) private var modelContext
    @Query private var items: [Item]
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    Toggle(isOn: Bindable(item).isOn) {
                        Text("Vibrate on Ring")
                    }
                }
            }
        }
    }
}

SwiftData list bindings with @Query

3 Answers3