I'm trying to imitate the normal UITableView behavior of a cell hiliting when you tap it, and then fading out. I'm getting pretty close except:
-
.background()doesn't fill the entire list cell, it just fits around the content. -
.listRowBackground()does fill the cell, but it doesn't animate.
Is there a way to animate a list row background?
Here's the source for full context:
struct Profile {
let name: String
var selected: Bool
var hilited: Bool = false
}
extension Profile: Identifiable {
var id: String { name }
}
struct ProfilesPicker: View {
@State var profiles: [Profile]
var body: some View {
List {
ForEach(0..<profiles.count) { index in
let profile = profiles[index]
CheckCell(name: profile.name, checked: profile.selected)
// using .background() gets a proper fade but doesn't fill the cell
.listRowBackground(Color(profile.hilited ? UIColor.systemFill : UIColor.systemBackground))
.onTapGesture {
profiles[index].hilited = true
withAnimation(.easeIn) {
profiles[index].hilited = false
profiles[index].selected.toggle()
}
}
}
}
}
}
struct CheckCell: View {
let name: String
let checked: Bool
var body: some View {
HStack {
Text(name)
Spacer()
if checked {
Image(systemName: "checkmark")
}
}
.contentShape(Rectangle())
}
}
Secondary question: the checkmark in my cell animates out but not in. Any ideas there? Thanks.
