https://kotlinlang.org logo
#compose
Title
# compose
r

robnik

12/17/2020, 6:01 PM
Is there a way to tell
Text
to wrap to a second line to avoid pushing things off screen? Inside a screen-wide Column I have:
Copy code
Row {
   Text("A somewhat long line that needs to wrap probably")
   Spacer(Modifier.width(3.dp))
   Switch(model.foo, { model.foo = it })
}
The Text and Switch are overlapping a bit, and the Switch half pushed off screen.
v

Vadim

12/17/2020, 6:42 PM
My switch-with-title is implemented like this:
Copy code
Row {
        Column(modifier = Modifier.weight(1f)) {
            Text(title)
        }

        Column {
            Switch(checked, onCheckedChange, enabled = enabled)
        }
    }
The key thing is
.weight(1)
, also the parent of this
Row
has constraint like
.fillMaxWidth()
(not sure if this is a requirement). With these, text fills all available horizontal space and keeps
Switch
aligned to the end
And yes - long text wraps in multiple lines
l

Luke

12/17/2020, 7:35 PM
I agree with
.weight(1f)
, although I'm not sure the extra columns are necessary. You could try applying the weight directly on Text
v

Vadim

12/17/2020, 7:39 PM
Hmm, last time I checked I couldn't do this... Sure, that would be much simpler
r

robnik

12/17/2020, 8:34 PM
It works for me with just the weight on Text, but I have no idea why, which is annoying. If anything, I'd thinking giving higher weight to Text would cause it to be more likely to push other things off screen.
Anyway, thank you!
l

Luke

12/17/2020, 9:06 PM
What weight does basically is it tells the row that we want everything to fit in the column's height or row's width, and to take
weight/total weight
of the parent. Those without weight default to wrap content, and those with weight take their fraction of the remaining space
💯 1
3 Views