SwiftUI DisclosureGroup overlaps when expanded - ios

Question

I have a grid of DisclosureGroup enclosed in a 2 column LazyVGrid. The problem I am having is that when I expand the DisclosureGroup it overlaps the Text below the group. Is there a way to fix the overlap? Ideally, I would like the DisclosureGroupView (shown below) to push everything down.
I tried to use zIndex on the DisclosureGroup but it does not look good. It basically expands the entire grid which encloses the DisclosureGroup view.
Appreciate very much for any direction to fix this issue!
Here is what I have so far:
DisclosureGroupView:
struct DisclosureGroupView: View {
var groups: [String: [String]]
#State private var isExpanded: [String: Bool]
#State private var selectedItems = [String: Set<String>]()
#State private var isTitleChecked: [String: Bool]
init(groups: [String: [String]]) {
self.groups = groups
_isExpanded = State(initialValue: groups.reduce(into: [String: Bool](), { result, group in
result[group.key] = false
}))
_isTitleChecked = State(initialValue: groups.reduce(into: [String: Bool](), {result, group in
result[group.key] = false
}))
}
var body: some View {
GeometryReader { geo in
let ncols = 2
let width = geo.size.width / CGFloat(ncols)
let layout = Array(repeating: GridItem(.fixed(width), spacing: 5), count: ncols)
LazyVGrid(columns: layout, alignment: .leading) {
ForEach(groups.keys.sorted(), id: \.self) { title in
self.disclosureGroup(title: title, items: groups[title, default: [String]()])
}
}
}
}
private func disclosureGroup(title: String, items: [String]) -> some View {
let expanded = Binding<Bool>(get: {isExpanded[title]!}, set: {isExpanded[title] = $0})
return DisclosureGroup(title, isExpanded: expanded) {
ScrollView {
VStack(alignment: .leading) {
ForEach(Array(items.enumerated()), id: \.1.hashValue) { index, item in
Text(item)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
.zIndex(1.0)
}
.frame(height: 60)
}
.font(.body)
.frame(width: 110)
.accentColor(.white)
.foregroundColor(.white)
.padding(5)
.background(Color(UIColor.systemBlue))
.cornerRadius(8.0)
}
}
ContentView to use the above view:
struct ContentView: View {
var body: some View {
VStack(alignment: .center, spacing: 10) {
Text("Disclosure Groups")
let groups: [String: [String]] = ["R1C1" : ["item 1", "item 2", "item 3", "item 4"],
"R1C2" : ["item 3", "item 4", "item 6", "item 7"],
"R2C1" : ["item 5", "item 6"],
"R2C2" : ["item 7", "item 8"]]
DisclosureGroupView(groups: groups)
.frame(height: 80)
Text("More Text here that is long")
.padding()
Text("Some More Text even wider than the first one")
}
}
}
Here is what I am getting:

Answer 1

StackOverFlow
The height is fixed because of the GeometryReader. I modified it by passing the width.
//
// SwiftUIView.swift
// asdadd
//
// Created by USER on 2021/08/04.
//
import SwiftUI
struct DisclosureGroupView: View {
var groups: [String: [String]]
var width: CGFloat
#State private var isExpanded: [String: Bool]
#State private var selectedItems = [String: Set<String>]()
#State private var isTitleChecked: [String: Bool]
init(groups: [String: [String]], width: CGFloat) {
self.groups = groups
self.width = width
_isExpanded = State(initialValue: groups.reduce(into: [String: Bool](), { result, group in
result[group.key] = false
}))
_isTitleChecked = State(initialValue: groups.reduce(into: [String: Bool](), {result, group in
result[group.key] = false
}))
}
var body: some View {
// GeometryReader { geo in
let ncols = 2
let width = width / CGFloat(ncols)
let layout = Array(repeating: GridItem(.fixed(width), spacing: 5), count: ncols)
LazyVGrid(columns: layout, alignment: .leading) {
ForEach(groups.keys.sorted(), id: \.self) { title in
self.disclosureGroup(title: title, items: groups[title, default: [String]()])
}
}
.border(Color.red)
// }
}
private func disclosureGroup(title: String, items: [String]) -> some View {
let expanded = Binding<Bool>(get: {isExpanded[title]!}, set: {isExpanded[title] = $0})
return DisclosureGroup(title, isExpanded: expanded) {
ScrollView {
VStack(alignment: .leading) {
ForEach(Array(items.enumerated()), id: \.1.hashValue) { index, item in
Text(item)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
.zIndex(1.0)
}
}
.font(.body)
.frame(width: 110)
.accentColor(.white)
.foregroundColor(.white)
.padding(5)
.background(Color(UIColor.systemBlue))
.cornerRadius(8.0)
}
}
struct ContentView2: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .center, spacing: 10) {
Text("Disclosure Groups")
let groups: [String: [String]] = ["R1C1" : ["item 1", "item 2", "item 3", "item 4"],
"R1C2" : ["item 3", "item 4", "item 6", "item 7"],
"R2C1" : ["item 5", "item 6"],
"R2C2" : ["item 7", "item 8"]]
DisclosureGroupView(groups: groups, width: geometry.size.width)
// .frame(height: 80)
Text("More Text here that is long")
.padding()
Text("Some More Text even wider than the first one")
}
}
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
ContentView2()
}
}
I don't know if VStack's alignment doesn't work.
I moved it to the center using position.
GeometryReader { geometry in
VStack(spacing: 10) {
Text("Disclosure Groups")
let groups: [String: [String]] = ["R1C1" : ["item 1", "item 2", "item 3", "item 4"],
"R1C2" : ["item 3", "item 4", "item 6", "item 7"],
"R2C1" : ["item 5", "item 6"],
"R2C2" : ["item 7", "item 8"]]
DisclosureGroupView(groups: groups, width: geometry.size.width)
// .frame(height: 80)
Text("More Text here that is long")
.padding()
Text("Some More Text even wider than the first one")
}
.position(x: geometry.frame(in:.local).midX,
y: geometry.frame(in:.local).midY)
}