Hello I was wondering if this is expected behavior or if there is a way I can fix this to get the behavior I am expecting. I have a Form
that has many sections in it and when the content of the section is selected I would like that section to be scrolled to the top to make it easier for the user to know that they selected that section. But when the Section
is selected, it is anchored to the top of the form but the header of the Section
is cut off. When the Section
is anchored to the top I would like the whole section to be seen (the header, content, and footer).
I also tried applying an ID to the section and using that to scroll to and that also didn't work.
Any help would be appreciated.
Here is some code to repo this:
struct ContentView: View {
@State private var selectionSectionContent: SectionContent?
var body: some View {
ScrollViewReader { proxy in
Form {
ForEach(contents, id: \.self) { content in
Section {
Text(content.text)
.onTapGesture {
selectionSectionContent = content
}
} header: {
Text("Header")
} footer: {
Text("Footer")
}
}
}
.onChange(of: selectionSectionContent) { _, newValue in
if let newValue {
// When text is tapped, scroll that section to the top.
withAnimation { proxy.scrollTo(newValue, anchor: .top) }
}
}
.padding()
}
}
let contents: [SectionContent] = [
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent(),
SectionContent()
]
}
class SectionContent: Hashable {
let text = "Fun Section"
public var id: ObjectIdentifier {
ObjectIdentifier(self)
}
static func == (lhs: SectionContent, rhs: SectionContent) -> Bool {
lhs.id == rhs.id
}
func hash(into hasher: inout Hasher) {
hasher.combine(id)
}
}
Here is a GIF of the header getting cut off when it is pinned to the top.