The CardView created works well independently but not with ASCollectionView

[Oleg G.]

Hey guys!

Describe the bug
So I am currently trying to have a CardView container. It seems to work in the preview and pretty much everywhere independently, but as soon as I use it with ASCollectionView, it seems to break and do not show the labels.

To Reproduce

TradeView

struct TradeView: View {
    @ObservedObject var viewModel: TradeViewModel

    var body: some View {
        NavigationView {
            ASCollectionView(data: viewModel.tradeCellViewModels, dataID: \.self) { tradeCellViewModel, _ in
                TradeCellView(viewModel: tradeCellViewModel)
            }
            .layout {
                .grid(layoutMode: .adaptive(withMinItemSize: 300),
                      itemSpacing: 8,
                      lineSpacing: 8,
                      itemSize: .estimated(600))
            }
            .navigationBarTitle("Trade")
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

#if DEBUG
struct TradeView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            TradeView(viewModel: TradeViewModel(with: Provider()))
        }
    }
}
#endif

TradeCellView

struct TradeCellView: View {
    @ObservedObject private(set) var viewModel: TradeCellViewModel

    var body: some View {
        let binding = Binding(
            get: {
                self.viewModel.isAuto
        },
            set: {
                self.viewModel.isAuto = $0
                self.viewModel.setAuto()
        })

        let cardView = CardView(content: {
            VStack {
                Text(self.viewModel.symbol)
                    .font(.title)
                    .bold()
                Text("$\(self.viewModel.marketValue)")
                    .font(.title)
                BarChartView(candles: self.viewModel.candleViewModels)
                    .frame(width: nil, height: 200)
                Text("Qty: \(self.viewModel.qty)")
                    .font(.body)
                Text("Avg Entry Price: $\(self.viewModel.avgEntryPrice)")
                    .font(.body)
                Text("Current Value: $\(self.viewModel.currentPrice)")
                    .font(.body)
                Text("Total Return %: \(self.viewModel.unrealizedPlpc)")
                    .font(.body)
                Text("Today Return %: \(self.viewModel.changeToday)")
                    .font(.body)
            }
        })

        return cardView
    }
}

#if DEBUG
struct TradeCellView_Previews: PreviewProvider {
    static var previews: some View {
        TradeCellView(viewModel: TradeCellViewModel(Position(), bars: [], isAuto: false))
            .previewLayout(PreviewLayout.sizeThatFits)
            .padding()
    }
}
#endif

Container

public struct CardView<Content: View>: View {
    let content: () -> Content

    public init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    public var body: some View {
        VStack {
            self.content()
        }
        .clipped()
        .padding()
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color.black, lineWidth: 0))
            .background(
                RoundedRectangle(cornerRadius: 10)
                    .foregroundColor(Color.white)
                    .shadow(color: Color.black, radius: 0.5, x: 0, y: 0)
        )
    }
}

struct CardView_Previews: PreviewProvider {
    static var previews: some View {
        CardView {
            VStack {
                Text("Symbol")
                    .font(.title)
                    .bold()
                Text("$500")
                    .font(.title)
                BarChartView(candles: [
                    CandleViewModel(with: Bar()) // X16
                ])
                    .frame(width: nil, height: 200)
                Text("Qty: 500")
                    .font(.body)
                Text("Avg Entry Price: $400")
                    .font(.body)
                Text("Current Value: $500")
                    .font(.body)
                Text("Total Return %: +2%")
                    .font(.body)
                Text("Today Return %: +24%")
                    .font(.body)
            }
        }.frame(height: 400)
        .padding()
    }
}

Current Behaviour

Expected behaviour

Xcode Version:

• Version 11.6 (11E708)

Simulator, Device, Both?

• Both

Thank you for any future help 👍

[Apptek Studios]

It is likely you need to add a fixedSize modifier to the Text items. Otherwise SwiftUI will allow them to be collapsed when it determines the smallest fitting size 👍

[Oleg G.]

Will try that thank you!