'Flickering with .searchable List

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?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source