リストの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)
}
}