https://kotlinlang.org logo
#compose
Title
# compose
n

Nabeel

04/21/2022, 12:40 PM
Is there any way to achieve this kind of ui?
LazyColumn() {
Copy code
Card() { 
      item{
          //Some ui
}
Copy code
items(myItems) { item ->
         // item here
      }
  }
}
There will be multiple cards inside LazyColumn.
a

agrosner

04/21/2022, 1:08 PM
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
if you wanted it to be very flat, you could make the background of each item sum up to a single card
n

Nabeel

04/21/2022, 1:32 PM
So the workarounds needed here in compose too, right? Similar to the RecyclerView.
s

Stylianos Gakis

04/21/2022, 2:28 PM
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.
☝🏻 1
n

Nabeel

04/21/2022, 6:02 PM
@Stylianos Gakis There will be multiple cards inside LazyColumn. Like list of items inside list of cards
Like this.
s

Stylianos Gakis

04/21/2022, 6:49 PM
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.
c

Chris Sinco [G]

04/21/2022, 10:44 PM
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
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 🤷🏻‍♂️
3 Views