'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.
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 |
|---|
