Flickering with .searchable List

Viewed 123

For the example, you need to add LoremSwiftum with SPM.

I'm found that when using the .init(_:id:rowContent:) constructor of List, there is flickering of the row items in the search field.

Video of what it looks like

import SwiftUI
import LoremSwiftum

let words = Array(Set(Lorem.words(3000).components(separatedBy: " ")))

struct ContentView: View {
    
    @State var searchText = ""
    
    var searchedWords: [String] {
        searchText.isEmpty ? words : Array(words.filter { $0.localizedCaseInsensitiveContains(searchText) }.prefix(50))
    }
    
    var body: some View {
        NavigationView {
            List(searchedWords, id:\.self) { word in
                HStack {
                    Rectangle().frame(width: 50, height: 50).foregroundColor(.red)
                    Text(word)
                }

            }
            .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always))
        }
       
    }
}

Using .indices makes the flicker go away, ie:

List(searchedWords.indices, id:\.self) { i in
     let word = words[I]
     ...
}

although as I understand it, using .indices can cause problems when the items change.

Using .id(UUID()) on the List also makes the flickering go away, although this has some problems as well.

So, how can I use the correct constructor of List and not have awful flickering of the items when searching?

0 Answers
Related