0

リストの2行に重なっているプラ​​スボタンを追加しようとしているとき。このコードは、1) ビューが表示されるとき、2) 上から下に (毎回) スクロールする場合にうまく機能します。ただし、リストの下から上にスクロールすると、コードが正しく機能しません。下から上にスクロールした後、次の行はプラス画像の一部に重なっています。

さらに、ビューが画面に表示されたときに画像の前景色を変更して、プラス画像を更新しようとしました。しかし、うまくいきませんでした。ここでは、Card モデルの 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)
    }
}
4

1 に答える 1