列出重新加载动画故障 [英] List reload animation glitches

问题描述

因此，我有一个列表，该列表在用户填写搜索关键字时发生变化，并且在没有结果时，所有单元格都会折叠，并以某种方式它们会飞到看上去很难看的第一部分.我的代码中是否有错误，或者这是预期的SwiftUI行为?谢谢.

So I have a list that changes when user fill in search keyword, and when there is no result, all the cells collapse and somehow they would fly over to the first section which looks ugly. Is there an error in my code or is this an expected SwiftUI behavior? Thanks.

import SwiftUI

struct ContentView: View {

    @ObservedObject var viewModel = ViewModel(photoLibraryService: PhotoLibraryService.shared)

    var body: some View {
        NavigationView {
            List {
                Section {
                    TextField("Enter Album Name", text: $viewModel.searchText)
                }
                Section {
                    if viewModel.libraryAlbums.count > 0 {
                        ForEach(viewModel.libraryAlbums) { libraryAlbum -> Text in
                            let title = libraryAlbum.assetCollection.localizedTitle ?? "Album"
                            return Text(title)
                        }
                    }
                }
            }.listStyle(GroupedListStyle())
                .navigationBarTitle(
                    Text("Albums")
                ).navigationBarItems(trailing: Button("Add Album", action: {
                        PhotoLibraryService.shared.createAlbum(withTitle: "New Album \(Int.random(in: 1...100))")
                }))
        }.animation(.default)
    }
}

推荐答案

1)，您必须在输入搜索字段时使用一些反跳功能来减少刷新列表的需要

1) you have to use some debouncing to reduce the needs to refresh the list, while typing in the search field

2)禁用行的动画

第二个是最难的部分.诀窍是通过设置其ID来强制重新创建某些视图.

The second is the hardest part. the trick is to force recreate some View by setting its id.

这是简单应用程序的代码(可以测试这个想法)

Here is code of simple app (to be able to test this ideas)

import SwiftUI
import Combine

class Model: ObservableObject {
    @Published var text: String = ""
    @Published var debouncedText: String = ""
    @Published var data = ["art", "audience", "association", "attitude", "ambition", "assistance", "awareness", "apartment", "artisan", "airport", "atmosphere", "actor", "army", "attention", "agreement", "application", "agency", "article", "affair", "apple", "argument", "analysis", "appearance", "assumption", "arrival", "assistant", "addition", "accident", "appointment", "advice", "ability", "alcohol", "anxiety", "ad", "activity"].map(DataRow.init)
    var filtered: [DataRow] {
        data.filter { (row) -> Bool in
            row.txt.lowercased().hasPrefix(debouncedText.lowercased())
        }
    }

    var id: UUID {
        UUID()
    }

    private var store = Set<AnyCancellable>()
    init(delay: Double) {
        $text
            .debounce(for: .seconds(delay), scheduler: RunLoop.main)
            .sink { [weak self] (s) in
            self?.debouncedText = s
        }.store(in: &store)
    }
}

struct DataRow: Identifiable {
    let id = UUID()
    let txt: String
    init(_ txt: String) {
        self.txt = txt
    }
}

struct ContentView: View {

    @ObservedObject var search = Model(delay: 0.5)

    var body: some View {

        NavigationView {
            VStack(alignment: .leading) {

                TextField("filter", text: $search.text)
                    .padding(.vertical)
                    .padding(.horizontal)

                List(search.filtered) { (e) in
                    Text(e.txt)
                }.id(search.id)
            }.navigationBarTitle("Navigation")
        }
    }
}


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

我对结果感到满意

这篇关于列出重新加载动画故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！