Android Jetpack Compose Row's height (IntrinsicSize.Min) is not stretched when children column generate more composables

Question

The following is my code snippet. I pass in editClick that adds a data class object into chargingViewModel.contractSelfPay, which is observed as itemList state. When I click the icon, I can tell itemList state receives update by having more edit icons that are spaced evenly. However, BasicGrid Row's height is not stretched with Intrinsic.Min.

If I remove IntrinsicSize.Min, even though row's height is stretched, dividers no longer can fillMaxHeight as well as icon columns. without Intrinsic.Min

@Composable
fun ContractSelfPay(chargingViewModel: ChargingViewModel, editClick: () -> Unit = {}) {

    val itemList by chargingViewModel.contractSelfPay.observeAsState()

    val composeList: List<@Composable () -> Unit> = itemList?.map {
        @Composable {
            Row {
                TempFunc { StyledText(text = it.itemTitle) }
                TempFunc { StyledText(text = it.originalPrice.toString()) }
                TempFunc { StyledText(text = it.selfPay.toString(), color = self_pay_blue) }
                TempFunc { StyledText(text = it.count.toString()) }
                TempFunc { StyledText(text = (it.selfPay * it.count).toString()) }
            }
        }
    } ?: listOf()

    val total = itemList?.map { (it.selfPay.toInt() * it.count.toInt()) }?.sum() ?: 0

    BasicGrid("全自費", composeList, total = total.toString(), editClick = editClick)
}

@Composable
fun BasicGrid(
    gridTitle: String,
    itemList: List<@Composable () -> Unit>,
    total: String = "0",
    editClick: () -> Unit = {}
) {
    Row(modifier = Modifier.height(IntrinsicSize.Min), verticalAlignment = Alignment.CenterVertically) {

        StyledTextBold(text = gridTitle, modifier = Modifier.weight(15f).wrapContentWidth())
        VerticalDivider()

        Column(
            modifier = Modifier.weight(60f)
        ) {
            itemList.forEachIndexed { index, compose ->
                compose()

                if (index != itemList.size - 1)
                    HorizontalDivider()
            }

            if (itemList.isEmpty())
                StyledText(text = "尚未有任何紀錄", modifier = Modifier.weight(1f).wrapContentSize())
        }


        VerticalDivider()
        StyledTextBold(text = total, modifier = Modifier.weight(15f).wrapContentWidth())
        VerticalDivider()

        Column(
            modifier = Modifier
                .weight(10f)
                .fillMaxHeight(),
            verticalArrangement = Arrangement.SpaceEvenly
        ) {
            itemList.forEachIndexed { index, detail ->
                Image(
                    painter = painterResource(R.drawable.icon_mode_edit),
                    contentDescription = "",
                    modifier = Modifier
                        .align(Alignment.CenterHorizontally)
                        .clickable { editClick() },
                )

                if (itemList.isNotEmpty() && index != itemList.size - 1)
                    HorizontalDivider()
            }
        }
    }
}

Leandro

Answer 1

I have created issue here https://issuetracker.google.com/issues/217910352. Hopefully it gets solved.

One of the work-arounds I could think of is keeping track of height and removing IntrinsicSize.Min.

As in:

// _key_ is something that causes change of the height of the row
var height by remember(_key_) { mutableStateOf(0) } 

Row(Modifier.onSizeChanged { height = it.height }) {
   VerticalDivider(Modifier.height(height))
}

In your case I suppose key would be size of itemList.

Masse

medium.com/@lepicekmichal/… – Masse

I don't have this problem with compose-jb v1.2.1. Seems fixed. – Masse

Answer 2

Thank you Majkeee. It's been a while. The way I fixed it at the time was with custom layout modifier. Not sure if it still works today though.

fun Modifier.expandHeight() = this.then(layout { measurable, constraints ->
    val placeable =
        measurable.measure(constraints.copy(maxHeight = Constraints.Infinity))
    layout(placeable.width, placeable.height) {
        placeable.placeRelative(0, 0)
    }
})

and to use it you can do

Column(modifier = Modifier.expandHeight())

Leandro