Using a List instead of a ScrollView and ForEach - foreach

Question

I have the following code to show some Cards which expand to fullscreen if the user taps on one of them:
import SwiftUI
struct ContentView: View {
#State private var cards = [
Card(title: "testA", subtitle: "subtitleA"),
Card(title: "testB", subtitle: "subtitleB"),
Card(title: "testC", subtitle: "subtitleC"),
Card(title: "testD", subtitle: "subtitleD"),
Card(title: "testE", subtitle: "subtitleE")
]
#State private var showDetails: Bool = false
#State private var heights = [Int: CGFloat]()
var body: some View {
ScrollView {
VStack {
if(!cards.isEmpty) {
ForEach(self.cards.indices, id: \.self) { index in
GeometryReader { reader in
CardView(card: self.$cards[index], isDetailed: self.$showDetails)
.offset(y: self.cards[index].showDetails ? -reader.frame(in: .global).minY : 0)
.fixedSize(horizontal: false, vertical: !self.cards[index].showDetails)
.background(GeometryReader {
Color.clear
.preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)
})
.onTapGesture {
withAnimation(.spring()) {
self.cards[index].showDetails.toggle()
self.showDetails.toggle()
}
}
}
.frame(height: self.cards[index].showDetails ? UIScreen.main.bounds.height : self.heights[index], alignment: .center)
.onPreferenceChange(ViewHeightKey.self) { value in
self.heights[index] = value
}
}
} else {
ActivityIndicator(style: UIActivityIndicatorView.Style.medium).frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2)
}
}
}
.onAppear() {
// load data
}
}
}
struct CardView : View {
#Binding var card : Card
#Binding var isDetailed : Bool
var body: some View {
VStack(alignment: .leading){
ScrollView(showsIndicators: isDetailed && card.showDetails) {
HStack (alignment: .center){
VStack (alignment: .leading){
HStack(alignment: .top){
Text(card.subtitle).foregroundColor(Color.gray)
Spacer()
}
Text(card.title).fontWeight(Font.Weight.bold).fixedSize(horizontal: false, vertical: true)
}
}
.padding([.top, .horizontal]).padding(isDetailed && card.showDetails ? [.top] : [] , 34)
Image("placeholder-image").resizable().scaledToFit().frame(width: UIScreen.main.bounds.width - 60).padding(.bottom)
if isDetailed && card.showDetails {
Text("Lorem ipsum ... ")
}
}
}
.background(Color.green)
.cornerRadius(16)
.shadow(radius: 12)
.padding(isDetailed && card.showDetails ? [] : [.top, .horizontal])
.opacity(isDetailed && card.showDetails ? 1 : (!isDetailed ? 1 : 0))
.edgesIgnoringSafeArea(.all)
}
}
struct Card : Identifiable {
public var id = UUID()
public var title: String
public var subtitle : String
public var showDetails : Bool = false
}
struct ViewHeightKey: PreferenceKey {
typealias Value = CGFloat
static var defaultValue = CGFloat.zero
static func reduce(value: inout Value, nextValue: () -> Value) {
value += nextValue()
}
}
Now i want to change both (or at least one) Scrollviews in ContentView and CardView to Lists, because of the lazy loading for better performance. But changing the ScrollView in ContentView results in glitched animations. And if i change it to a List in the CardView, no card is even showing up anymore.
Any idea how I can change the code to use Lists?

Answer 1

So as noted in the comments, the flickering is a bug on Apple's end. The problem is you want to first resize then change offset because if you change offset and then resize you will get the flickering issue when cells overlap. I wrote a simple test that can be found in this pastebin
Because of my time constraint I was able to solve the weird scrolling behavior where the 2nd/3rd/etc... card would jump to the top by changing the animations order. I will come back to this post hopefully tonight and fix the flickering by fixing the order in which animations happens first. They have to be chained.
Here is my code where I
init() {
UITableView.appearance().separatorStyle = .none
UITableView.appearance().backgroundColor = .clear
UITableView.appearance().layoutMargins = .zero
UITableViewCell.appearance().backgroundColor = .clear
UITableViewCell.appearance().layoutMargins = .zero
}
...
List {
VStack {
if(!cards.isEmpty) {
ForEach(self.cards.indices, id: \.self) { index in
GeometryReader { reader in
CardView(card: self.$cards[index], isDetailed: self.$showDetails)
// 1. Note I switched the order of offset and fixedsize (not that it will make difference in this step but its good practice
// 2. I added animation in between
.fixedSize(horizontal: false, vertical: !self.cards[index].showDetails)
.animation(Animation.spring())
.offset(y: self.cards[index].showDetails ? -reader.frame(in: .global).minY : 0)
.animation(Animation.spring())
.background(GeometryReader {
Color.clear
.preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)
})
.onTapGesture {
// Note I commented this out, it's the source of the bug.
// withAnimation(Animation.spring().delay()) {
self.cards[index].showDetails.toggle()
self.showDetails.toggle()
// }
}
.zIndex(self.cards[index].showDetails ? 100 : -1)
}
.frame(height: self.cards[index].showDetails ? UIScreen.main.bounds.height : self.heights[index], alignment: .center)
.onPreferenceChange(ViewHeightKey.self) { value in
self.heights[index] = value
}
}
} else {
Text("Loading")
}
}
// I added this for styling
.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
}
// I added this for styling
.listStyle(PlainListStyle())
.onAppear() {
// load data
}
NOTE: If however, you wait a second or two between opening and closing, you wouldn't notice that flickering behavior.
NOTE2: This chaining behavior can also be observed in the App Store But they blend the animations perfectly. If you pay attention you will find some delay
EDIT 1
In this edit I would like to point out that the previous solutions does enhance the animations, it does still have the flickering issue, unfortunately, not much can be done to that except we can have a delay between presenting and hiding. Even Apple has done so. If you pay attention to the App Store on iOS you will notice that when you try to open one of their cards you wont be able to press "X" right away, you would first notice that it is unresponsive and that is because even Apple had to add some delay between presenting and being able to hide. The delay is basically a work around. Furthermore, you can also notice that when you tap the card, it won't be presented right away. It would actually take some time to execute animations which is again just a trick to add delay.
So to solve the flickering issue you can add a simple timer that counts down before allowing the user to be able to close the opened card or open the closed card again. This delay can be the duration of some of your animations so the user won't feel any lag in your app.
here I wrote a simple code to demonstrate how can that be done. Notice though, the blending of animations or delays is no where perfect and can be tweaked even further. I only wanted to demonstrate that it is possible to get rid of the flickering or at least reduce it by a lot. There might be far better solutions than this, but that's what I came up with :)
EDIT 2: On a second test I was able to point out that this flickering is actually happening because your list doesn't have animations. So a quick solution can be done by applying animations to the List; Keep in mind the above solution in Edit 1: would works just as good but it would require a lot of trials and errors, without further waiting, here is my solution.
import SwiftUI
struct StackOverflow22: View {
#State private var cards = [
Card(title: "testA", subtitle: "subtitleA"),
Card(title: "testB", subtitle: "subtitleB"),
Card(title: "testC", subtitle: "subtitleC"),
Card(title: "testD", subtitle: "subtitleD"),
Card(title: "testE", subtitle: "subtitleE")
]
#State private var showDetails: Bool = false
#State private var heights = [Int: CGFloat]()
init() {
UITableView.appearance().separatorStyle = .none
UITableView.appearance().backgroundColor = .clear
UITableView.appearance().layoutMargins = .zero
UITableViewCell.appearance().backgroundColor = .clear
UITableViewCell.appearance().layoutMargins = .zero
}
var body: some View {
List {
VStack {
if(!cards.isEmpty) {
ForEach(self.cards.indices, id: \.self) { index in
GeometryReader { reader in
CardView(card: self.$cards[index], isDetailed: self.$showDetails)
.fixedSize(horizontal: false, vertical: !self.cards[index].showDetails)
.offset(y: self.cards[index].showDetails ? -reader.frame(in: .global).minY : 0)
.background(GeometryReader {
Color.clear
.preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)
})
.onTapGesture {
withAnimation(.spring()) {
self.cards[index].showDetails.toggle()
self.showDetails.toggle()
}
}
}
.frame(height: self.cards[index].showDetails ? UIScreen.main.bounds.height : self.heights[index], alignment: .center)
.onPreferenceChange(ViewHeightKey.self) { value in
self.heights[index] = value
}
}
} else {
Text("Loading")
}
}
.animation(Animation.linear)
.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
}
.listStyle(PlainListStyle())
.onAppear() {
// load data
}
}
}
struct CardView : View {
#Binding var card : Card
#Binding var isDetailed : Bool
var body: some View {
VStack(alignment: .leading){
ScrollView(showsIndicators: isDetailed && card.showDetails) {
HStack (alignment: .center){
VStack (alignment: .leading){
HStack(alignment: .top){
Text(card.subtitle).foregroundColor(Color.gray)
Spacer()
}
Text(card.title).fontWeight(Font.Weight.bold).fixedSize(horizontal: false, vertical: true)
}
}
.padding([.top, .horizontal]).padding(isDetailed && card.showDetails ? [.top] : [] , 34)
Image("placeholder-image").resizable().scaledToFit().frame(width: UIScreen.main.bounds.width - 60).padding(.bottom)
if isDetailed && card.showDetails {
Text("Lorem ipsum ... ")
}
}
}
.background(Color.green)
.cornerRadius(16)
.shadow(radius: 12)
.padding(isDetailed && card.showDetails ? [] : [.top, .horizontal])
.opacity(isDetailed && card.showDetails ? 1 : (!isDetailed ? 1 : 0))
.edgesIgnoringSafeArea(.all)
}
}
struct Card : Identifiable, Hashable {
public var id = UUID()
public var title: String
public var subtitle : String
public var showDetails : Bool = false
}
struct StackOverflow22_Previews: PreviewProvider {
static var previews: some View {
StackOverflow22()
}
}
struct ViewHeightKey: PreferenceKey {
typealias Value = CGFloat
static var defaultValue = CGFloat.zero
static func reduce(value: inout Value, nextValue: () -> Value) {
value += nextValue()
}
}