SwiftUI List - 行内容的某些部分与下一行重叠

Question

当我尝试添加一个加号按钮时，它重叠在列表的两行上。该代码适用于以下情况：1）当出现视图时，2）从上到下滚动（每次）。但是，当我从列表底部滚动到顶部时，代码无法正常工作。从下往上滚动后，下一行与正图部分重叠

此外，当视图出现在屏幕上时，我尝试通过更改图像的前景色来刷新加号图像。但是，它没有用。在这里，我切换 Card 模型的 needRefresh 变量来刷新加号图像。

Requirement

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()
            }
    }
}

SwiftUI List - 行内容的某些部分与下一行重叠

SwiftUI List - some part of row content is overlapped by next row

list

swiftui

swiftui-zstack