Список SwiftUI — некоторая часть содержимого строки перекрывается следующей строкой

Question

Когда я пытаюсь добавить кнопку «плюс», которая перекрывает две строки списка. Код отлично работает для случаев: 1) Когда появится представление, 2) Прокрутка сверху вниз (Каждый раз). Однако код не работает должным образом, когда я прокручиваю список снизу вверх. После прокрутки снизу вверх следующая строка перекрывает часть плюсового изображения.

Более того, я попытался обновить изображение плюса, изменив цвет переднего плана изображения, когда на экране появляется вид. Но это не сработало. Здесь я переключаю переменную needRefresh модели карты, чтобы обновить изображение плюса.

Требование

      struct Card: Identifiable {
    var cardNum = 0
    var id = UUID()
    var needRefresh: Bool = false

    init(cardNum: Int) {
        self.cardNum = cardNum
    }
}

class CardModel: ObservableObject {
    @Published var cards = [Card]()

    init() {
        for val in (1...10) {
            let card = Card(cardNum: val)
            cards.append(card)
        }
    }
}

struct ContentView: View {
    @StateObject var cardModel = CardModel()
    @State var refreshStatus = false

    var body: some View {
        NavigationView {
            List($cardModel.cards) { $card in
                CardViewRow(card: $card)
            }
            .navigationTitle("List")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct CardViewRow: View {
    @Binding var card: Card
    var body: some View {
        ZStack(alignment: .bottom){
            CardView()

            Image(systemName: "plus.app.fill")
                .font(.system(size: 40.0))
                .offset(y: 25)
                .foregroundColor(card.needRefresh ? .blue : .red)
                .onAppear {
                    card.needRefresh.toggle()
                }
        }
    }
}

struct CardView: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 25, style: .continuous)
                .fill(.white)
                .shadow(radius: 10)

            VStack {
                Text("Question")
                    .font(.largeTitle)
                    .foregroundColor(.black)

                Text("Answer")
                    .font(.title)
                    .foregroundColor(.gray)
            }
            .padding(20)
            .multilineTextAlignment(.center)
        }
        .frame(width: UIScreen.main.bounds.size.width - 40, height: 150)
    }
}

Answer 1

Я думаю, что со списком будет сложно, так как он «обрезает» ячейки списка. Но это будет работать так с ScrollViewа также LazyVStack:

      struct ContentView: View {
    @ObservedObject var cardVM = CardVM()
    @State var refreshStatus = false

    var body: some View {
        NavigationView {
            ScrollView {
                LazyVStack(spacing: -15) {
                    ForEach(cardVM.cardList, id: \.id) { card in
                        CardViewRow(card: card)
                    }
                }
            }
            .listStyle(.plain)
            .navigationTitle("List")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct CardViewRow: View {
    @ObservedObject var card: Card
    var body: some View {
        
        CardView()
        
        Image(systemName: "plus.app.fill")
            .font(.system(size: 40.0))
            .offset(y: 0)
            .foregroundColor(card.needRefresh ? .blue : .red)
            .zIndex(1)
        
            .onAppear {
                card.needRefresh.toggle()
            }
    }
}