ios – SwiftUI List row expansion doesn’t animate smoothly; items below jump abruptly

It is generally difficult to animate a change in height for a List row smoothly. However, a possible workaround is to use a DisclosureGroup.

When a DisclosureGroup with native styling is used in a List, it navigates quite smoothly. The way it works is actually to add a new row to the list when expanded. To use your own styling, a custom DisclosureGroupStyle can be used. By using the same technique of adding an extra row for the expanded content, the animation works quite smoothly.

Some notes:

• Tracking the expanded state can be handled by the DisclosureGroup.
• The function makeBody of the custom style should return two rows when the content is expanded. This is done by not using a VStack as outer container for the content.
• The vertical spacing for the expanded content can be reduced by applying custom .listRowInsets.
• The list row separator above the expanded note can be hidden.
• The alignment of the separator below the expanded note can be controlled using an .alignmentGuide.

Here is how your example can be adapted to work this way:

struct MyDisclosureGroupStyle: DisclosureGroupStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack(spacing: 12) {
            configuration.label
            Spacer()
            Button {
                withAnimation {
                    configuration.isExpanded.toggle()
                }
            } label: {
                Image(systemName: "note.text")
                    .imageScale(.medium)
            }
            .buttonStyle(.plain)
        }
        .padding(.vertical, 8)

        if configuration.isExpanded {
            configuration.content
                .listRowInsets(.init(top: 0, leading: 16, bottom: 10, trailing: 16))
                .padding(.bottom, 8)
                .listRowSeparator(.hidden, edges: .top)
                .alignmentGuide(.listRowSeparatorLeading) { dim in
                    0
                }
        }
    }
}

struct ContentView: View {
    private let items: [HistoryItem] = [
        HistoryItem(id: UUID(), title: "Client A - Morning shift", note: "Short note for entry 1."),
        HistoryItem(id: UUID(), title: "Client B - Field visit", note: "Longer note for entry 2 so the row expands more than the others."),
        HistoryItem(id: UUID(), title: "Client C - Training", note: nil),
        HistoryItem(id: UUID(), title: "Client D - Support", note: "Another note for entry 4."),
        HistoryItem(id: UUID(), title: "Client E - Wrap up", note: "Final note for entry 5.")
    ]

    var body: some View {
        NavigationStack {
            List {
                ForEach(items) { item in
                    if let note = item.note {
                        DisclosureGroup {
                            Text(note)
                                .font(.subheadline)
                                .foregroundStyle(.secondary)
                                .padding(10)
                                .background(.background.secondary, in: .rect(cornerRadius: 8))
                        } label: {
                            Text(item.title)
                                .font(.headline)
                        }
                        .disclosureGroupStyle(MyDisclosureGroupStyle())
                    } else {
                        Text(item.title)
                            .font(.headline)
                            .padding(.vertical, 8)
                    }
                }
            }
            .listStyle(.plain)
            .navigationTitle("History")
        }
    }
}