BLACK FRIDAY: Save 50% on all my Swift books and bundles! >>

Generic child views containing bindings do not re-render / UI does not update

Forums > SwiftUI

I have a WrappingHStack view which attempts to display an array of subviews.

It works great with simple children and state, although it doesn't seem to work when one of the children have custom bindings.

I believe this is due to one of these reasons:

  1. The "items" argument to WrappingHStack: (type: [<Content: View>]) does not have any property wrapper assigned to it. Although i'm not sure which would be appropriate.
  2. Since the items with bindings are children of WrappingHStack, the State -> Binding connection is 2 levels separated, rather than 1, which is causing issues.
  3. The ContentView does not know when to update, potentially requiring an ObservableObject or similar.

Code below:

struct WrappingHStack<Content: View>: View {

    var items: [Content]

    @State private var rows: Array<Array<Content>> = [[]]
    @State private var screenWidth: CGFloat = 0
    @State private var currentWidthOffset: CGFloat = 0

    var body: some View {
        VStack(alignment: .leading) {
            GeometryReader { proxy in
                ZStack {
                    ForEach(items.indices, id: \.self) { idx in
                        let view = items[idx]

                        view.hidden().overlay(
                            GeometryReader { proxy2 in
                                view.hidden().onAppear {
                                    determine_row(view: view, width: proxy2.size.width)
                                }
                            }
                        )
                    }
                }.onAppear { screenWidth = proxy.size.width }
            }.frame(height: 0)

            ForEach(rows.indices, id: \.self) { idx1 in
                let row = rows[idx1]
                HStack {
                    ForEach(row.indices, id: \.self) { idx2 in
                        let view = row[idx2]
                        view
                    }
                }
            }
        }
    }

    func determine_row(view: Content, width: Double) {
        if width + currentWidthOffset < screenWidth {
            rows[rows.count - 1].append(view)
            currentWidthOffset += width
        } else {
            rows.append([view])
            currentWidthOffset = width
        }
    } 
}

and a preview example:

struct DummyContentView: View {

    var items: [String]
    @State var selected: [String: Bool] = [:]

    // Bind dictionary value.
    func binding(for id: String) -> Binding<Bool> {
        return .init(
            get: { return selected[id, default: false] },
            set: {
                let _ = print("setting to \($0)")
                selected[id] = $0
            }
        )
    }

    var body: some View {
        ZStack {
            WrappingHStack(items: items.map { item in
                DummyItem(label: item, selected: binding(for: item))
            })
        }
        .onAppear {
            // Initialize dictionary
            items.forEach { item in
                selected[item] = false
            }
        }
    }
}

#Preview {
    DummyContentView(items: ["Chip #1", "Chip #2", "Chip #3"])
}

Its also worth nothing that if it works fine without a custom binding. If i directly used a Binding, the state updates. Although that isn't an option here

1      

Save 50% in my WWDC sale.

SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.