How can I make the check left-aligned? Code in :th...
# compose
a
How can I make the check left-aligned? Code in 🧵. (If the image is blank, clicking on it seems to help)
Copy code
Row(Modifier
    .fillMaxWidth()
    .height(IntrinsicSize.Min)
) {
  Text("Hello", fontSize = 34.sp)
  Icon(Icons.Default.Check, null,
    Modifier.fillMaxHeight()
    .weight(1f)
    .background(Color.Red)
  )
}
I can put the icon in a row, but the the size of the icon is smaller than the above.
n
Why just not use sapce with same background than icon use weight 1 and icon with wrap width ? It’s to has more click cpace on icon ?
c
I'd put the icon in a row and remove the outer height modifier (IntrinisicSize.Min). Not sure why you need to set the size explicitly versus the default fit to content?
a
If I use a row, then the icon is smaller. And I want the height of the icon to match the height of the text, hence the intrinsic. Thanks for the suggestions. I'll try them later.
c
Ah yes that is tricky. You may have to go with a custom layout, though when I ran your code in Studio, it seems you can pull off the same effect by setting the outer Row container background to Red, setting the background of Text to Green, then setting
Modifier.aspectRatio(1f)
and removing weight on the Icon to maintain the size and height equal to the text
Copy code
Row(
    Modifier
        .fillMaxWidth()
        .height(IntrinsicSize.Min)
        .background(Color.Red)
) {
    Text(
        "Hello",
        fontSize = 34.sp,
        modifier = Modifier.background(Color.Green)
    )
    Icon(
        Icons.Default.Check,
        null,
        Modifier
            .fillMaxHeight()
            .aspectRatio(1f)
    )
}
Preview screenshot (1f and 2f fontScale)
🙌 1
a
Great Chris! I hadn't been using
aspectRatio
before. Only weights. Nice to know I have
aspectRatio
in my toolkit. Cheers.
☝️ 1