将元素追加到数组后，它应该显示更多元素

问题描述

This is how it looks before and after..

我有一个ForEach循环，当我单击该卡时，它会向阵列添加一个新元素，然后它应该显示2张卡。 但是仍然有一张卡。 （但我附加了新的卡片元素） 那我该怎么办？

struct TimelineFromUserView: View {
    
    var card: [Card] = cardData
    
    var body: some View {
        
        vstack {
            HStack {
                Text("History").bold()
                    .font(.largeTitle)
                    .padding(.top,20)
                    .padding(.leading,20)
                Spacer()
                
            }
            Divider()
            ScrollView(.vertical,showsIndicators: false) {
                
                vstack(spacing: 30) {
                    ForEach(card) { item in
                        CardForTimeline(card: item)
                            .onTapGesture {
                                    print("juhuu")
                                    cardData.append(Card(number: 2,start: "01.10.2021",end: "20.10.2021",days: 19,success: false))
                                    print(cardData)
                            }
                        .padding()
                    }
                }
                .padding(.top,10)
            }
        }
    }
}

struct Card: Identifiable{
    
    var id = UUID()
    var number: Int
    var start: String
    var end: String
    var days: Int
    var success: Bool
}

var cardData: [Card] = [
    Card(number: 1,start: "05.06.2020",end: "15.06.2020",days: 10,success: true)
]

解决方法

您只能将数组card的副本cardData传递到ForEach中，但是如果我正确理解了您的代码段，它应该是原始数组cardData。

如果这不是问题，则发布更多代码将很有帮助。

,

我只是将Text上的CardForTimeline替换（因为我没有您的CardForTimeline），并且它返回2（我也将print（cardData）替换为print（cardData.count））。您可以创建全新的项目并添加此代码。点击后将打印2、3、4、5

struct ContentView: View {
    
    var card: [Card] = cardData
    
    var body: some View {
        
        VStack {
            HStack {
                Text("History").bold()
                    .font(.largeTitle)
                    .padding(.top,20)
                    .padding(.leading,20)
                Spacer()
                
            }
            Divider()
            ScrollView(.vertical,showsIndicators: false) {
                
                VStack(spacing: 30) {
                    ForEach(card) { item in
                        Text(verbatim: "we")
                            .onTapGesture {
                                    print("juhuu")
                                    cardData.append(Card(number: 2,start: "01.10.2021",end: "20.10.2021",days: 19,success: false))
                                print(cardData.count)
                            }
                        .padding()
                    }
                }
                .padding(.top,10)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct Card: Identifiable{
    
    var id = UUID()
    var number: Int
    var start: String
    var end: String
    var days: Int
    var success: Bool
}

var cardData: [Card] = [
    Card(number: 1,start: "05.06.2020",end: "15.06.2020",days: 10,success: true)
]

,

问题是SwiftUI不知道如何更新视图。尝试写作

@State private var card: [Card] = [
    Card(number: 1,success: true)
]

而不是： var card: [Card] = cardData。 这应该可行，因为然后您告诉SwiftUI，只要值更改，它就应该更新视图。

此外，您还必须将代码的添加部分更改为此：

.onTapGesture {
   self.card.append(Card(number: 2,success: false))
}

以上是使用本地@State属性管理状态的方法。您也可以将可观察对象与卡牌组合使用。看起来可能像这样：

struct ContentView: View {
    @ObservedObject private var cardData = CardData()
    
    var body: some View {
        
        VStack {
            HStack {
                Text("History").bold()
                    .font(.largeTitle)
                    .padding(.top,showsIndicators: false) {
                
                VStack(spacing: 30) {
                    ForEach(cardData.cards) { card in
                        Text(card.id.uuidString)
                            .onTapGesture {
                                self.cardData.add(card: Card(number: 2,success: false))
                            }
                        .padding()
                    }
                }
                .padding(.top,10)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct Card: Identifiable{
    var id = UUID()
    var number: Int
    var start: String
    var end: String
    var days: Int
    var success: Bool
}

class CardData: ObservableObject {
    // store the cards and make sure its get-only from the outside
    @Published private(set) var cards = [
        Card(number: 1,success: true)
    ]
    
    // MARK: - Intents for modifing the cards,add additional if needed
    
    func add(card: Card) {
        self.cards.append(card)
    }
}

我希望这会帮助您解决问题