I want to emit 6 times the same composable Card but in the m

Question

I want to emit 6 times the same composable Card but in the middle I want a Divider So I want to get something like C C C D C C C How would one do this

Filip Wiesner · Answer

```repeat 3 C D repeat 3 C or maybe repeat 7 if it == 3 D else C ```

Orhan Tozan · Answer

I have the first one already but I think it could be cleaner so I don t have to duplicate the logic I m writing in the two repeat blocks I was thinking about doing something like repeat 6 C add 3 D

Orhan Tozan · Answer

But that obviously doesn t work in Compose

Filip Wiesner · Answer

You can make something like that work You have the full power of Kotlin the possibilities are endless smile

Orhan Tozan · Answer

< Filip Wiesner> I was thinking about that but it s not that easy I think the problem here is that Compose doesn t return anything but emits things I think it would be easy to do something like this in a return based system like ReactJS but in Compose every time you call a Composable it runs It s like a side effect

Filip Wiesner · Answer

Couldn t you return a Composable function thinking face

Orhan Tozan · Answer

Hmm gonna try

Filip Wiesner · Answer

Something like <https developer android com reference kotlin androidx compose runtime package summary movableContentOf kotlin Function0 |movableContentOf >

Orhan Tozan · Answer

```buildList repeat 6 index gt add Composable C ```

Orhan Tozan · Answer

This gives me the following error Internal Error occurred while analyzing this expression

Orhan Tozan · Answer

` Composable ` is the right way to create a Composable lambda right

Csaba Szugyiczki · Answer

Do not oversimplify things they just get messy after a certain point

Csaba Szugyiczki · Answer

I think there is nothing wrong with the 1st suggestion

Csaba Szugyiczki · Answer

but if you want you can have a ``` Composable fun CardGroup count Int repeat count Card ``` and then write ```CardGroup count = 3 Divider CardGroup count = 3 ```

Orhan Tozan · Answer

< Csaba Szugyiczki> ```Row verticalAlignment = Alignment CenterVertically modifier = modifier fillMaxWidth repeat 3 index gt Cell value = value index onValueChange = newNumber gt val newValue = value toMutableList apply set index newNumber val newNumberWasEntered = value = newValue amp amp newNumber = null onValueChange newValue if newNumberWasEntered focusManager moveFocus FocusDirection Right imeAction = ImeAction Next onKeyboardAction = focusManager moveFocus FocusDirection Right modifier = Modifier weight 1f padding end = 10 dp onFocusChanged focusState gt if focusState isFocused val newValue = value toMutableList apply set index null toList onValueChange newValue Divider color = MaterialTheme colors primary thickness = 2 dp modifier = Modifier width 10 dp repeat 3 loopIndex gt val digitIndex = loopIndex + 3 val isLastCell = digitIndex == value lastIndex Cell value = value digitIndex onValueChange = newNumber gt val newValue = value toMutableList apply set digitIndex newNumber toList val newNumberWasEntered = value = newValue amp amp newNumber = null onValueChange newValue if newNumberWasEntered focusManager moveFocus FocusDirection Right imeAction = if isLastCell ImeAction Done else ImeAction Next onKeyboardAction = if isLastCell focusManager clearFocus else focusManager moveFocus FocusDirection Right modifier = Modifier fillMaxWidth padding start = 10 dp weight 1f onFocusChanged focusState gt if focusState isFocused val newValue = value toMutableList apply set digitIndex null toList onValueChange newValue ```

Csaba Szugyiczki · Answer

What you mean by composable lambda is I think referred to as Slot in Compose and looks like this `content Composable gt Unit` This concept is all over compose

Orhan Tozan · Answer

Above is my real code

Csaba Szugyiczki · Answer

Ohh I think I know what you want to create Is it a 6 digit input box I think it is much easier to have only one invisible Input box and just display the entered digits however you want

Orhan Tozan · Answer

< Csaba Szugyiczki> In react you can do something like ```const items = Array 6 C items splice 3 0 D items is now C C C D C C C ``` How would you do this in Compose

Csaba Szugyiczki · Answer

That is not possible in Compose Im affraid

Orhan Tozan · Answer

< Csaba Szugyiczki> yes it is a 6 digit input box Could you elaborate on the one invisible input box part

Orhan Tozan · Answer

< Csaba Szugyiczki> that s unfortunate and a bit dissappointing IMO It reduces the power of Compose if that s the case in my eyes I m open to be proven wrong

Csaba Szugyiczki · Answer

Basically you would have an input field covering your whole view But make it transparent And below it you could draw the 6 boxes in a Row and have whatever decoration on the boxes or between them You just have to make sure the user knows which digit is typed at the moment

Csaba Szugyiczki · Answer

Composable functions return nothing They are plain kotlin functions without a return value so there is nothing that you could add to a list either

Orhan Tozan · Answer

Not sure if it is easier to build something like this into one view

Orhan Tozan · Answer

Just the 6 boxes part

Orhan Tozan · Answer

Yes they return nothing indeed Which can be an advantage in some cases like being able to write ```if showButton Button ``` instead of ```if showButton Button else null ``` but it also has it s flaws as you now lose the power of the regular programming power of transforming and mapping values Example is that we can t achieve my React example few messages above

Orhan Tozan · Answer

It loses the purity of functional programming

Filip Wiesner · Answer

The Composable functions are intended for Data gt UI transformation You can still transform and map the data before you emit UI based on it

Orhan Tozan · Answer

Hmm I guess so but that means I now have to create a new data model for each UI component which is more work

Albert Chang · Answer

Something like ```val card = Composable Card repeat 3 card D repeat 3 card ``` will work

Orhan Tozan · Answer

Yep that s what I ve sticked with