Can anybody tell me what's wrong with the following component ? It should be made of two colors : a ...
l
Can anybody tell me what's wrong with the following component ? It should be made of two colors : a purple background and a brown line at top. Instead, all I can see is a purple square.
Copy code
@Composable
fun SimpleZone(modifier: Modifier) {
    val backgroundColor = Color(0xCAD63B60) // purple
    val cellColor = Color(0xFFFFCE9E) // brown
    
    Column(modifier = modifier.background(backgroundColor)) {
        Row(modifier = Modifier.fillMaxHeight(0.1f).background(cellColor)) {

        }
    }
}

@Preview
@Composable
fun SimpleZonePreview() {
    SimpleZone(modifier = Modifier.size(100.dp))
}
n
All I see is brown, not purple. Is that what you meant? My guess is that
fillMaxHeight
doesnโ€™t work because the height is already specified in the modifier (in this case inherited from the parent). If you โ€œresetโ€ this by adding
.wrapContentHeight
before it, it resizes as you desire.
a
nah, looks like you're missing a width for the row if it's currently empty
๐Ÿ‘ 1
e.g.
Copy code
Column(Modifier.size(100.dp).background(Color.Blue)) {
  Row(Modifier.fillMaxHeight(0.1f).fillMaxWidth().background(Color.Red)) {
  }
}
๐Ÿ‘ 1
Column
relaxes the minimum width constraint for children
๐Ÿ‘ 1
l
Yes @Adam Powell, you're right. It worked. Thank you. So I needed to set the width of the row to its maximum.
๐Ÿ‘ 1
n
cool, I learned something too ๐Ÿ™‚
๐Ÿ‘ 2
@Adam Powell if you define the size as @loloof64 did and pass that modifier down to the Row, then fillMaxWidth() doesnโ€™t work.
๐Ÿ‘ 1
a
depends on your definition of, "work" ๐Ÿ™‚ if you do
Modifier.size(100.dp).fillMaxWidth()
then yes, the
fillMaxWidth()
is then a no-op.
size
sets both the min and max constraints to the same value, and
fillMaxWidth
sets the minimum width constraint to the maximum width constraint
๐Ÿ‘ 1
so there will be no observable effect
all the size modifiers do is manipulate the min/max constraints
๐Ÿ‘ 1
fillMaxHeight(0.1f)
for example, sets both the min and max height to
0.1f * incomingMaxHeight
๐Ÿ‘ 1
n
thank you, thatโ€™s very helpful
๐Ÿ‘ 1