Is there any way to achieve this kind of ui? `Laz...

# compose

[Nabeel]

Is there any way to achieve this kind of ui?
LazyColumn() {

Card() { 
      item{
          //Some ui

}

items(myItems) { item ->
         // item here
      }
  }
}

[Nabeel]

There will be multiple cards inside LazyColumn.

[agrosner]

items cant go within a card container - lazy column is single level item list. you would have to put those inside a singular Column within the Card

[agrosner]

if you wanted it to be very flat, you could make the background of each item sum up to a single card

[Nabeel]

So the workarounds needed here in compose too, right? Similar to the RecyclerView.

[Stylianos Gakis]

It’s possible what you want to do is simply invert the order or LazyColumn and Card. So you’ll end up with a card that contains the lazy column.

[Nabeel]

@Stylianos Gakis There will be multiple cards inside LazyColumn. Like list of items inside list of cards

[Nabeel]

Like this.

[Stylianos Gakis]

Do the contents inside “Produce” “Process” etc get super long?
If yes maybe you want three Cards with each one containing a LazyColumn inside.
If not, maybe you want one LazyColumn that contains items, where this item is the entire “Produce” card, and then the entire “Process” card etc.
If the “Produce” “Process” and “Market cards simply always there and there are no more such groupings, I’d go with the triple card each containing a LazyColumn approach I think.

[Chris Sinco [G]]

If each Card in the LazyColumn has nested Cards with nested LazyColumns, it's doable - you just have to control the emit of item versus items differently

[Chris Sinco [G]]

Also side note from UX POV that might simplify implementation: with the amount of nesting I see in your screenshot, you may want to consider having the user navigate to a details screen for each card to allow a full screen to read through all the details of the nested cards. That is, if it's not important to compare nested details between the top level cards 🤷🏻‍♂️