Running into a weird problem with Tab Rows and int...
# compose-android
b
Running into a weird problem with Tab Rows and intrinsics. I have a
Row
that includes a Surface with some content, and then a SecondaryScrollableTabRow. Without any special modifiers, the tab row works correctly, but the Surface isn't tall enough to fill the Row (first screen show below). So, I added a height modifier to the containing Row and set it to
IntrinsicSize.Max
, and set the
Surface
to
fillMaxHeight()
. Now the surface fills the height correctly, but the Tab Row stops working right. When you click tabs, the Indicator disappears (second screenshot below). Has anyone else run into this issue before? (Code posted in the 🧵 )
here's my code:
Copy code
@Composable
private fun ModifierBar(
    wagerBarState: WagerBarState,
    onBetTypeCleared: () -> Unit,
    onModifierSelected: (BetModifier) -> Unit
) {
    val selectedBetType = wagerBarState.selectedBetType ?: return
    val modifiers = selectedBetType.modifiers

    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.height(IntrinsicSize.Max)
    ) {
        Surface(
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier.fillMaxHeight()
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .clickable { onBetTypeCleared() }
                    .padding(horizontal = 12.dp, vertical = 8.dp)
            ) {
                Icon(
                    painter = painterResource(CdiIcons.ArrowBack),
                    contentDescription = "Back to bet types"
                )
                Text(
                    text = selectedBetType.betType.abbreviation,
                    modifier = Modifier.padding(start = 4.dp)
                )
            }
        }

        SecondaryScrollableTabRow(
            selectedTabIndex = wagerBarState.selectedModifierIndex,
            edgePadding = 0.dp,
            containerColor = TabRowDefaults.affiliateContainerColor,
            contentColor = TabRowDefaults.affiliateContentColor,
            divider = {}
        ) {
            modifiers.forEachIndexed { index, modifier ->
                Tab(
                    selected = index == wagerBarState.selectedModifierIndex,
                    onClick = { onModifierSelected(modifier) },
                    text = { Text(modifier.displayName) }
                )
            }
        }
    }
}
oh, maybe the SecondaryScrollableTabRow uses SubcomposeLayout ... That would cause things to blow up when using Intrinsics.