SwiftUI - Prevent Sections from flying/zooming to the right in List when dynamically filtering them

Question

I originally asked this question:

SwiftUI - Dynamic List filtering animation flies to right side when data source is empty

There, I had a List without sections. I was filtering them so that it only showed the rows that contained the text inside a TextField. The solution was to wrap everything inside the List in a Section.

Unfortunately, I now need to filter Sections. Here's my code:

struct Group: Identifiable {
    let id = UUID() /// required for the List
    
    var groupName = ""
    var people = [Person]()
}
struct Person: Identifiable {
    let id = UUID() /// required for the List
    
    var name = ""
}
struct ContentView: View {

    @State var searchText = ""

    var groups = [
        Group(groupName: "A People", people: [
            Person(name: "Alex"),
            Person(name: "Ally"),
            Person(name: "Allie")
        ]),
        Group(groupName: "B People", people: [
            Person(name: "Bob")
        ]),
        Group(groupName: "T People", people: [
            Person(name: "Tim"),
            Person(name: "Timothy")
        ])
    ]

    var body: some View {

        VStack {
            TextField("Search here", text: $searchText) /// text field
                .padding()
            
            List {
                ForEach(
                    
                    /// Filter the groups for those that contain searchText
                    groups.filter { group in
                        searchText.isEmpty || group.groupName.localizedStandardContains(searchText)
                    }
                    
                ) { group in
                    Section(header: Text(group.groupName)) {
                        ForEach(group.people) { person in
                            Text(person.name)
                        }
                    }
                    
                }
            }
            .animation(.default) /// apply the animation
        }
    }
}

Result:

I pass in a filtered array in the ForEach to determine the Sections. However, whenever that array changes, the List animates really weirdly. The Sections zoom/fly to the right side, and come back from the left when the array includes them again. How can I avoid this animation?

If I remove .animation(.default), it doesn't animate at all, as expected. But, I would still like an animation. Is there a way to fade the changes, or slide them instead?

@Yodagama I'm not applying a .transition anywhere... does List do that by default? — aheze
– aheze, Commented Dec 5, 2020 at 1:33

Casper Zandbergen · Accepted Answer · 2020-12-08 10:27:29Z

2

+50

The solution is not using List. As long as you're not using selection and row deleting a ScrollView is basically the same.

If you want to style it a bit like the List that's also not that hard:

struct SearchAnimationExample: View {

    ...

    var body: some View {

        VStack {
            TextField("Search here", text: $searchText) /// text field
                .padding()
            
            ScrollView {
                VStack(spacing: 0) {
                    ForEach(
                        groups.filter { group in
                            searchText.isEmpty || group.groupName.localizedStandardContains(searchText)
                        }
                    ) { group in
                        Section(header: header(title: group.groupName)) {
                            ForEach(group.people) { person in
                                row(for: person)
                                Divider()
                            }
                        }
                        
                    }.transition(.opacity) // Set which transition you would like
                    
                    // Always full width
                    HStack { Spacer() }
                }
            }
            .animation(.default) 
        }
    }
    
    func header(title: String) -> some View {
        HStack {
            Text(title).font(.headline)
            Spacer()
        }
        .padding(.horizontal)
        .background(Color.gray.opacity(0.4))
    }
        
    func row(for person: Person) -> some View {
        HStack {
            Text(person.name)
            Spacer()
        }.padding()
    }
}

Looks practically the same as the default list:

answered Dec 8, 2020 at 10:27

Casper Zandbergen

3,6872 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

aheze Over a year ago

Ah nice! But you can't apply list styles, right? For example InsetGroupedListStyle

aheze Over a year ago

Also it doesn't seem to animate on iOS 13... video

user3151675 Over a year ago

Warning: ScrollView and HStack/VStack don't reuse views, which can cause memory issues and lag, so I don't recommend this as a replacement of a list with hundreds of rows. Ideally, if you want to avoid Lists altogether, you should use LazyHStacks and LazyVStacks (however, unfortunately, they are only available from iOS 14).

Casper Zandbergen Over a year ago

Oh that iOS 13 not animating is interesting. Never seen that happen. Yeah no list styles.

Steffen Funke Over a year ago

Weird to find this answer as accepted, since a VStack is NOT a List. No cell re-using, no deletion, etc. ... This is a workaround at its best, when you don't have many items, otherwise, for dynamic content, it is not the way to go. Original question stays unanswerd, as I have the same problem.

|

Collectives™ on Stack Overflow

SwiftUI - Prevent Sections from flying/zooming to the right in List when dynamically filtering them

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related