SwiftUI - 动态过滤时防止部分在列表中向右飞行/缩放

Question

我最初问这个问题：

SwiftUI - 数据源为空时动态列表过滤动画飞到右侧

在那里，我有一个List没有部分的。我正在过滤它们，以便它只显示包含 .txt 文件中文本的行TextField。解决方案是将所有内容包装List在Section.

不幸的是，我现在需要过滤Sections。这是我的代码：

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
        }
    }
}

结果：

我在 中传入一个过滤数组来ForEach确定Sections。然而，每当该数组发生变化时，List动画就会变得非常奇怪。sSection缩放/飞到右侧，并在数组再次包含它们时从左侧返回。我怎样才能避免这个动画？

如果我删除.animation(.default)，它根本不会像预期的那样产生动画。但是，我还是想要动画。有没有办法淡出这些变化，或者滑动它们？

Answer 1

解决方案是不使用 List。只要您不使用选择和行删除，ScrollView 基本上是相同的。

如果你想将其设计得有点像列表，那也不难：

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()
    }
}

看起来与默认列表几乎相同：