Colton Idle
01/10/2022, 9:36 PMBox(modifier = Modifier.fillMaxWidth().border(1.dp, Color.Red)) {
Row(
modifier =
Modifier.height(IntrinsicSize.Min)
.width(IntrinsicSize.Max)
.horizontalScroll(rememberScrollState())) {
Button(
onClick = { /*TODO*/},
modifier = Modifier.fillMaxHeight().fillMaxWidth(.9f).border(1.dp, Color.Green)) {
Text(text = "One")
}
Button(
onClick = { /*TODO*/},
modifier = Modifier.fillMaxHeight().fillMaxWidth(.9f).border(1.dp, Color.Green)) {
Text(text = "Two\nTwo\nTwo")
}
Button(
onClick = { /*TODO*/},
modifier = Modifier.fillMaxHeight().fillMaxWidth(.9f).border(1.dp, Color.Green)) {
Text(text = "Three")
}
}
}
Zach Klippenstein (he/him) [MOD]
01/10/2022, 9:45 PM.width(IntrinsicSize.Max)
.horizontalScroll(rememberScrollState())
horizontalScroll
will measure its child with infinite max width, and the parent box is already fillMaxWidth
, so i’m not sure what you’re trying to achieve with this combination of modifiers.Box
just to apply modifiers, you can just move the outer modifiers to the start of the inner component’s modifier chainheight(IntrinsicSize.Max)
makes sense either when all the children are fillMaxHeight()
fillMaxWidth
isn’t working on the children is because horizontalScroll
causes its layout node to measure with infinite width, and 90% of infinity is still infinity.fillParentMaxWidth
BoxWithConstraints
, but i also don’t see a reason not to just use a lazy rowColton Idle
01/10/2022, 9:52 PMZach Klippenstein (he/him) [MOD]
01/10/2022, 9:54 PMColton Idle
01/10/2022, 9:58 PMBoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
Row(
modifier =
Modifier.fillMaxWidth()
.border(1.dp, Color.Red)
.horizontalScroll(rememberScrollState())) {
Button(
onClick = { /*TODO*/},
modifier =
Modifier
.width(boxWithConstraintsScope.maxWidth.times(.9f))
.border(1.dp, Color.Green)) { Text(text = "One") }
Button(
onClick = { /*TODO*/},
modifier =
Modifier
.width(boxWithConstraintsScope.maxWidth.times(.9f))
.border(1.dp, Color.Green)) { Text(text = "Two\nTwo\nTwo") }
Button(
onClick = { /*TODO*/},
modifier =
Modifier
.width(boxWithConstraintsScope.maxWidth.times(.9f))
.border(1.dp, Color.Green)) { Text(text = "Three") }
}
}
Zach Klippenstein (he/him) [MOD]
01/10/2022, 9:59 PMmaxWidth * 0.9f
?Colton Idle
01/10/2022, 10:01 PMtimes
. Is there a reason not to use times? Is it more overhead because its a method call or something?Zach Klippenstein (he/him) [MOD]
01/10/2022, 10:02 PM*
operator if you’re multiplyingColton Idle
01/10/2022, 10:04 PMBoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
Row(
modifier =
Modifier.fillMaxWidth()
.border(1.dp, Color.Red)
.height(IntrinsicSize.Min)
.horizontalScroll(rememberScrollState())) {
Button(
onClick = { /*TODO*/},
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) { Text(text = "One") }
Button(
onClick = { /*TODO*/},
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) { Text(text = "Two\nTwo\nTwo") }
Button(
onClick = { /*TODO*/},
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) { Text(text = "Three") }
}
}
Zach Klippenstein (he/him) [MOD]
01/10/2022, 10:08 PMButton
not propagating intrinsics correctly? What happens if you replace the buttons with just their text (and move the button modifiers to Text
)Colton Idle
01/10/2022, 10:08 PMZach Klippenstein (he/him) [MOD]
01/10/2022, 10:11 PMColton Idle
01/10/2022, 10:11 PMBoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
Row(
modifier =
Modifier.fillMaxWidth()
.height(IntrinsicSize.Min)
.border(1.dp, Color.Red)
.horizontalScroll(rememberScrollState())) {
Box(
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) { Text(text = "One") }
Box(
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) { Text(text = "Two\nTwo\nTwo") }
Box(
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) { Text(text = "Three") }
}
}
Zach Klippenstein (he/him) [MOD]
01/10/2022, 10:15 PMButton
is Box { Row {} }
internally. I would think both of those would just forward intrinsic height, but maybe not?Colton Idle
01/10/2022, 10:16 PMBoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
Row(
modifier =
Modifier.fillMaxWidth()
.height(IntrinsicSize.Min)
.border(1.dp, Color.Red)
.horizontalScroll(rememberScrollState())) {
Text(
text = "One",
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green))
Text(
text = "Two\nTwo\nTwo",
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green))
Text(
text = "Three",
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green))
}
}
Zach Klippenstein (he/him) [MOD]
01/10/2022, 10:17 PMBox
components in your second-last code snippet with `Row`s, does it break again?Colton Idle
01/10/2022, 10:21 PMZach Klippenstein (he/him) [MOD]
01/10/2022, 10:21 PMColton Idle
01/10/2022, 10:22 PMZach Klippenstein (he/him) [MOD]
01/10/2022, 10:22 PMColton Idle
01/10/2022, 10:23 PMOne Two Three
Two
Two
One Two Three
Two
Two
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
Row(
modifier =
Modifier.fillMaxWidth()
.height(IntrinsicSize.Min)
.border(1.dp, Color.Red)
.horizontalScroll(rememberScrollState())) {
Column(
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) { Text(text = "One") }
Column(
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) {
Text(text = "Two")
Text(text = "Two")
Text(text = "Two")
}
Column(
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) { Text(text = "Three") }
}
}
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
Row(
modifier =
Modifier.fillMaxWidth()
.height(IntrinsicSize.Min)
.border(1.dp, Color.Red)
.horizontalScroll(rememberScrollState())) {
Column(
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.padding(4.dp)
.border(1.dp, Color.Green)) { Text(text = "One") }
Column(
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) {
Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
}
Column(
modifier =
Modifier.fillMaxHeight()
.width(boxWithConstraintsScope.maxWidth * (.9f))
.border(1.dp, Color.Green)) { Text(text = "Three") }
}
}
Zach Klippenstein (he/him) [MOD]
01/10/2022, 10:43 PMwrapContentHeight
before the height(IntrinsicSize.Min)
, or else the row and all the buttons fill the entire height.Row(
Modifier
// .wrapContentHeight()
.height(IntrinsicSize.Min)
) {
Button(
onClick = {},
Modifier.fillMaxHeight()
) {
Text("one")
}
Button(
onClick = {},
Modifier.fillMaxHeight()
) {
Text("two\ntwo\ntwo")
}
Button(
onClick = {},
Modifier.fillMaxHeight()
) {
Text("three\nthree")
}
}
Row(
Modifier
.wrapContentHeight()
.height(IntrinsicSize.Min)
) {
Button(
onClick = {},
Modifier.fillMaxHeight()
) {
Text("one")
}
Button(
onClick = {},
Modifier.fillMaxHeight()
) {
Text("two\ntwo\ntwo")
}
Button(
onClick = {},
Modifier.fillMaxHeight()
) {
Text("three\nthree")
}
}
Colton Idle
01/10/2022, 10:54 PMZach Klippenstein (he/him) [MOD]
01/10/2022, 11:03 PMColton Idle
01/10/2022, 11:09 PMRow(
modifier =
Modifier.wrapContentHeight()
.height(IntrinsicSize.Min)
.border(1.dp, Color.Red)
.horizontalScroll(rememberScrollState())) {
Column(modifier = Modifier.fillMaxHeight().padding(4.dp).border(1.dp, Color.Green)) {
Text(text = "One")
}
Column(modifier = Modifier.fillMaxHeight().border(1.dp, Color.Green)) {
Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
}
Column(modifier = Modifier.fillMaxHeight().border(1.dp, Color.Green)) { Text(text = "Three") }
}
Leads to this. What's weird is that the heights are not the same of Two and Three. They start at the top, so the baseline of the top three text labels aren't in a single line.BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
Row(
Modifier.wrapContentHeight()
.height(IntrinsicSize.Min)
.horizontalScroll(rememberScrollState())) {
Button(onClick = {}, Modifier.fillMaxHeight().width(boxWithConstraintsScope.maxWidth * .9f)) {
Text("one")
}
Button(onClick = {}, Modifier.fillMaxHeight().width(boxWithConstraintsScope.maxWidth * .9f)) {
Text("two\ntwo\ntwo")
}
Button(onClick = {}, Modifier.fillMaxHeight().width(boxWithConstraintsScope.maxWidth * .9f)) {
Text("three\nthree")
}
}
}
I added boxWithConstraints, and a width to each item, and a horizontal scroll, and its back to the previous behavior seemingly.var blah by remember { mutableStateOf(0.dp) }
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
blah = boxWithConstraintsScope.maxWidth
}
Row(
Modifier.wrapContentHeight()
.height(IntrinsicSize.Min)
.horizontalScroll(rememberScrollState()),
) {
Button(onClick = {}, Modifier.fillMaxHeight()) {
Text("one")
}
Button(onClick = {}, Modifier.fillMaxHeight()) {
Text("two\ntwo\ntwo")
}
Button(onClick = {}, Modifier.fillMaxHeight()) {
Text("three\nthree")
}
}
var blah by remember { mutableStateOf(0.dp) }
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
blah = boxWithConstraintsScope.maxWidth
}
Row(
Modifier.wrapContentHeight()
.height(IntrinsicSize.Min)
.horizontalScroll(rememberScrollState()),
) {
Button(onClick = {}, Modifier.fillMaxHeight().width(blah * .9f)) {
Text("one")
}
Button(onClick = {}, Modifier.fillMaxHeight().width(blah * .9f)) {
Text("two\ntwo\ntwo")
}
Button(onClick = {}, Modifier.fillMaxHeight().width(blah * .9f)) {
Text("three\nthree")
}
}
Mihai Popa
01/11/2022, 4:48 PMhorizontalScroll
before height
on Row
.
So just:
Row(Modifier.horizontalScroll(rememberScrollState()).height(IntrinsicSize.Min))
Row
inside the BoxWithConstraints
. This is the intended usage and will not introduce a 1 frame delay between the first measurement and the drawing of the buttonsColton Idle
01/11/2022, 5:50 PMBoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val boxWithConstraintsScope = this
val blah = boxWithConstraintsScope.maxWidth * .9f
Row(
Modifier.horizontalScroll(rememberScrollState()).height(IntrinsicSize.Min),
) {
Box(Modifier.width(blah).fillMaxHeight().border(1.dp, Color.Green)) { Text("one") }
Box(Modifier.width(blah).fillMaxHeight().border(1.dp, Color.Green)) {
Text("two\ntwo\ntwo")
}
Box(Modifier.width(blah).fillMaxHeight().border(1.dp, Color.Green)) { Text("three\nthree") }
}
}
As a final question. Is there really no other way to get the 90% width besides using BoxWithConstraints. I've heard BWC isn't the best thing to use if its not necessary, so I'm trying to make sure there isn't something else I can do.Zach Klippenstein (he/him) [MOD]
01/11/2022, 5:57 PMonSizeChanged
or another custom layout around the parent.Colton Idle
01/11/2022, 5:59 PMdimsuz
01/31/2022, 2:52 PMColton Idle
01/31/2022, 4:35 PMdimsuz
01/31/2022, 4:44 PM