0

Here is how CustomCardsScroll page looks like: Preview of custom scrollView

While the contents of CustomCardsScroll is not visible to homepage as you can see from here: HomeViewPage

Below is the code:

struct HomeView: View {

    @EnvironmentObject var accountData: UserDetailsViewModel
    @ObservedObject var cardsModel: CardViewModel

    var body: some View {
        NavigationView {
            VStack {
                UserInfoTop(
                    color: Color.white ,
                    data: accountData.userInfo ?? User(username: "Loading", image: UIImage(systemName: "photo.circle")!)
                )
                    .padding()
                    .onAppear {
                        accountData.onAppear()
                    }
            
                CustomCardsScroll(images: cardsModel.cards)
                    .onAppear {
                        cardsModel.onAppear()
                    }
            }
            .background(Color.mainDarkBlueBackgroundColor.ignoresSafeArea())
            .navigationBarTitle("Main", displayMode: .inline)
            .navigationBarItems(
                trailing:
                    Button(
                        action: {}
                    ) {
                        Text("Log out")
                        .foregroundColor(Color.white)
                    }
            )
        }
    }
}

Code of cardScroll:

struct CustomCardsScroll: View {

    var images: [Card]
    
    let columns = [
        GridItem(.fixed(200)),
        GridItem(.flexible())
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 10) {
                ForEach(images) { item in
                    VStack(alignment: .center) {
                        NavigationLink {
                            CardContent(data: item)
                        } label: {
                            CardItem(card: item)
                        }
                    }
                }
            }
        }
        .frame(maxHeight: 465)
    }
}

For the CustomCard:

struct CardItem: View {
    var card: Card

    var body: some View {
    
        VStack(alignment: .center) {
            AsyncImage(url: URL(string: card.image))
                .frame(width: 150, height: 150)
                .padding()
                .cornerRadius(15)
        
            Text(card.name)
                .foregroundColor(.primary)
                .font(.caption)
        }
        .padding()
    }
}

I can't configure navigationView properly, so that on tap on one of the cards, image of which is asynchronously loaded from the web, the view gets presented where card content is displayed.

DoS
  • 11
  • 4
  • I'm trying to understand your question. Do you want to tap on `CardItem` and see `CardContent` in the same position (or the other way around?)? But the problem is that you get `CardContent` in a completely different view? It is not clear to me what is happening wrong right now. – HunterLion Mar 15 '22 at 21:26
  • You haven't shown your `CardViewModel`, but it obviously has a function that retrieves data. Could it be that you have no data going to the view? If there is nothing in `cardsModel.cards`, then there will be nothing shown for the view. – Yrb Mar 15 '22 at 21:46
  • Yes, I want to tap on the cardItem and see the content of it. But the cards are not visible – DoS Mar 16 '22 at 05:39

0 Answers0