a

    Anthony

    1 year ago
    In the sample code linked below, why does the second card not show all of it's elements?
    Row(
        Modifier
            .height(IntrinsicSize.Max)
            .fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Card(
            Modifier
                .weight(1f)
                .fillMaxHeight()
        ) {
            Text("Hello")
        }
        Card(
            Modifier
                .weight(1f)
                .fillMaxHeight()
        ) {
            Column() {
                Text("hello", textAlign = TextAlign.Center)
                Icon(
                    imageVector = Icons.Default.SafetyDivider,
                    contentDescription = null,
                    tint = iBibleYellow
                )
    
            }
    
        }
    }
    Will Shelor

    Will Shelor

    1 year ago
    Why do you have the height set to IntrinsicSize.max? One of our devs used intrinsicSize, and it caused some erratic behavior. Does it work if you remove it?
    a

    Anthony

    1 year ago
    I need the row to take the height of the largest element in the group, however, setting the row height with intrinsic size min or max does not work at all
    Chris Sinco [G]

    Chris Sinco [G]

    1 year ago
    I think you don’t need IntrinsicSize. The height of Row by default will be based on the tallest child. I modified your code a bit by removing some of the
    fillMaxHeight
    modifiers, and got this result:
    Modified code:
    @Preview(
        showBackground = true,
        uiMode = Configuration.UI_MODE_NIGHT_YES
    )
    @Composable
    fun Test(
        value: String = "Hello"
    ) {
        MyTheme {
            Row(
                Modifier
                    .fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Card(
                    Modifier.weight(1f)
                ) {
                    Text("Hello")
                }
                Card(
                    Modifier.weight(1f)
                ) {
                    Column {
                        Text(value, textAlign = TextAlign.Center)
                        Icon(
                            imageVector = Icons.Default.SafetyDivider,
                            contentDescription = null,
                        )
                    }
                }
            }
        }
    }
    I introduced the
    value
    param to the Composable to test it as a component in a List, which I assume is a use case for this so that the Row height always is set to the tallest content
    List code:
    @Preview(
        showBackground = true,
        uiMode = Configuration.UI_MODE_NIGHT_YES
    )
    @Composable
    fun ListTest() {
        MyTheme {
            Column(
                Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Test()
                Test("adfsda lkasdj flaskdjf lkasdjf laksdjf asdlkjf alskdjf alsdjf laskdjf aksdfj dsalkjf dsa")
                Test()
                Test()
                Test("asldfjasldkfj lkj dalskfj lsdajf asldkjaf")
            }
        }
    }
    Not sure if this is helpful 🤷
    a

    Anthony

    1 year ago
    @Chris Sinco [G] I appreciate the help, but I realize I didn't fully clarify my problem. What I want the row to do is be sized to the tallest element it has, and then have each of the smaller elements fill to the same height as the largest element within the row. Googling led me to the intrinsic size value but, when using it the larger element refuses to expand to it's supposed full size, leaving all the other smaller elements improper.
    @Preview
    @Composable
    fun PreviewIntrinsicSizeBlockRowText() {
        IBible_TestTheme {
            Row(
                Modifier
                    .height(IntrinsicSize.Min)
                    .fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Card(
                    Modifier
                        .weight(1f)
                        .fillMaxHeight()
                ) {
                    Text("Hello")
                }
                Card(
                    Modifier
                        .weight(1f)
                        .fillMaxHeight()) {
                    Column() {
                        repeat(10) {
                            Text("More content")
                        }
                    }
                }
            }
        }
    }
    This is another test I have when testing out the intrinsic size height, It seems to work when it's a simple column with Text() but fails with my previous example of substituting just a single text and icon in a column
    Chris Sinco [G]

    Chris Sinco [G]

    1 year ago
    Gotcha - that is odd. I wonder if this is expected when a child has fillMaxHeight with a parent having height of IntrinisicSize.Max. Maybe @Adam Powell has some ideas
    The other alternative is using BoxWithConstraints or a custom layout, though that makes things a bit more complicated. It’s strange that things work with multiple Text elements, but not when using Text and Icon…