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:
- 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. - Since the items with bindings are children of WrappingHStack, the State -> Binding connection is 2 levels separated, rather than 1, which is causing issues.
- 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 heres a preview example of WrappingHStack and some dummy child views
struct DummyItem: View {
var label: String
@Binding var selected: Bool
var body: some View {
Text(label)
.foregroundColor(selected ? .blue : .red)
.onTapGesture {
selected.toggle()
}
}
}
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
ViewModifier
does what you are trying to do already.
ForEach
is a view not a for loop, you’ll crash doing items[idx]
because it is designed to work with ids not indices and id: ./self
is wrong.
Views are values that shouldn’t be stored, it is trivial performance-wise to make new ones (its like making an int) which is why body is called when SwiftUI’s dependency tracking detects a change to a dependency. Seems to me your code is disabling that feature.
Views don’t belong in State or arrays
any suggestions on how to improve?
Pass data, not views into your generic view
What Joakim said