ios - SwiftUI - 修复在没有列表的情况下使用可搜索时的动画跳转

Question

希望有人知道这个动画问题的解决方案，因为我找不到让它工作的方法!

我在 ScrollView 的 LazyVStack 中使用 ForEach。我在 ScrollView 上有一个 .searchable 修饰符。当我输入/取消搜索字段时，导航栏和搜索字段向上/向下设置动画，但我的 ScrollView 在没有动画的情况下跳转。

如果我在 .searchable 之后添加 .animation(.easeInOut) 它会正确地设置动画。然而有两个问题，它在 iOS 15.0 中被弃用，并且它在列表项出现和被过滤时以疯狂的方式动画化等等。

当使用列表时，它也可以工作，但不能按照我需要的方式进行自定义。此问题存在于模拟器、预览版和设备中。

有谁知道我如何在不使用 List 的情况下正确地设置动画(它没有我需要的列表项的可定制性)？

感谢您的帮助!

我为重现问题所做的精简版:

import SwiftUI

struct ContentView: View {
    @State var searchText: String = ""
    
    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
                CustomListView()
            }
            .navigationTitle("Misbehaving ScrollView")
            .searchable(text: $searchText, placement: .automatic)
            // This .animation() will fix the issue but create many more...  
//            .animation(.easeInOut)
        }
    }
}

struct CustomListView: View {
    @State private var listItems = ["Item 0", "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"]
    
    var body: some View {
        LazyVStack(alignment: .leading, spacing: 10) {
            ForEach(listItems, id: \.self) { item in
                CustomListItemView(item: item)
                    .padding(.horizontal)
            }
        }
    }
}

struct CustomListItemView: View {
    @State var item: String
    
    var body: some View {
        ZStack(alignment: .leading) {
            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .foregroundColor(.green.opacity(0.1))
            VStack(alignment: .leading, spacing: 4) {
                Text(item)
                    .font(.headline)
                Text(item)
                    .font(.subheadline)
            }
            .padding(25)
        }
    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

显示相同问题的更基本示例:

import SwiftUI

struct SwiftUIView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            ScrollView {
                Text("1")
                Text("2")
                Text("3")
                Text("4")
                Text("5")
                Text("6")
            }
        }
        .searchable(text: $text)
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

Answer 1

我们需要为 ScrollView 几何变化设置动画，使其与可搜索文本字段的出现/消失同步，正如所见，这是可动画的。

这里有两个任务:1) 检测可搜索的状态变化 2) 在正确的位置设置 ScrollView 的动画(以避免意外的内容动画，正如已经提到的问题)

任务 1) 的一个可能解决方案是读取 isSearching 环境变量:

.background(
    // read current searching state is available only in
    // child view level environment
    SearchingReaderView(searching: $isSearching)
)

// ...

struct SearchingReaderView: View {
    @Binding var searching: Bool
    @Environment(\.isSearching) private var isSearching

    var body: some View {
        Text(" ")
            .onChange(of: isSearching) {
                searching = $0          // << report to perent
            }
    }
}

任务 2) 是通过修改事务在转换期间立即注入(inject)动画:

ScrollView(.vertical) {
    CustomListView()
}
.transaction {
    if isSearching || toggledSearch {
        // increased speed to avoid views overlaping
        $0.animation = .default.speed(1.2)

        // needed to animate end of searching
        toggledSearch.toggle()
    }
}

使用 Xcode 13.4/iOS 15.5 进行测试(调试慢速动画以获得更好的可见性)

Test code on GitHub