Chris Fillmore
12/10/2021, 6:04 PM[Image] [Text] .....whitespace.... [Checkbox]
sindrenm
12/10/2021, 6:05 PMSpacer(Modifier.weight(1f))
before the last element, probably. 😒imple_smile:Chris Fillmore
12/10/2021, 6:05 PMRow(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement: Arrangement.SpaceBetween,
) {
Row {
Image()
Text()
}
CheckBox()
}
sindrenm
12/10/2021, 6:07 PMRow {
Text()
Text()
Spacer(Modifier.weight(1f)
Checkbox()
}
Chris Fillmore
12/10/2021, 6:09 PMText()
is very widesindrenm
12/10/2021, 6:10 PMSpacer
instead of the SpaceBetween
modifier, perhaps.
Row(modifier = Modifier.fillMaxWidth()) {
Row {
Image()
Text()
}
Spacer(Modifier.weight(1f))
CheckBox()
}
Chris Fillmore
12/10/2021, 6:16 PMCasey Brooks
12/10/2021, 6:23 PMListItem()
? it's perfect for setting up and properly aligning these kinds of rows with content at the start/end of the rowChris Fillmore
12/10/2021, 6:25 PMsindrenm
12/10/2021, 6:31 PMModifier.weight(1f)
on the innermost row seems to work, at least:
@Preview
@Composable
fun Test() {
Box(Modifier.fillMaxSize()) {
Row {
Row(Modifier.weight(1f)) {
Icon(Icons.Default.Home, contentDescription = null)
Text("Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.")
}
Checkbox(checked = false, onCheckedChange = {})
}
}
}
ListItem
, but I believe it's still experimental, and it's also fairly opinionated. But do still check it out. 👍Chris Sinco [G]
12/12/2021, 7:15 PMweight
modifier on the Row with Image + Text is your friend here. And also softWrap = true
and overflow = TextOverflow.Ellipsis
on the Text component so longer text doesn't get clipped.sindrenm
12/12/2021, 8:32 PMSpacer
in between or Arrangement.SpaceBetween on the topmost one didn't work here? 🙂Chris Sinco [G]
12/12/2021, 9:36 PMweight
is Text:
Row(Modifier.fillMaxWidth()) {
Icon(Icons.Default.Home, contentDescription = null)
Text(
"Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.",
Modifier.weight(1f)
)
Checkbox(checked = false, onCheckedChange = {})
}
sindrenm
12/13/2021, 8:23 AMSpacer(Modifier.weight(1f))
would just vary in size based on the size of the Text
when it grows/shrinks. But the fact that it can push it out of the bounds of the Row
makes it much clearer that it's the Text
(or whatever wraps it) that needs its size constrained instead. 👍Row { Icon Text Checkbox }
makes much more sense, too. 👍Chris Fillmore
12/13/2021, 5:59 PMListItem()
, but I’ll play around to see if a simpler solution suits my needs. Thanks again!Chris Sinco [G]
12/13/2021, 6:13 PMListItem
is very opinionated towards the layouts in the Material spec. So very useful for quickly getting a nice list item done, but if you want to customize it, I’d suggest creating a custom one yourself versus trying to fight against the templates.ListItem
templates, it is mostly layout code that is opinionated with certain defaults and hard-coding, so it’s not anything that can’t easily be copied and modified to create your own templates