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

TheMrCodes

01/06/2021, 11:32 AM
Upfront: Sry if this it the 101. time asking that question but I didn't find one for my use case. How can i fit the height of the Box around the "X"-Text to the height of its Parent (the Row with the gray background) The Problem is that fillHeight would fill the whole screen not just the Parent Code im Thread
1
Copy code
MaterialTheme {
    Column(Modifier.fillMaxSize()) {
        Box(Modifier.weight(1f).fillMaxWidth()) {
            Text("Test")
        }
        Row(Modifier.wrapContentHeight().fillMaxWidth().background(Color.Gray)) {
            Box(
                modifier = Modifier/** .fillParentHeight() **/.background(Color.Red)
            ) {
                Text("X")
            }
            Text("Title", modifier = Modifier.padding(16.dp))
        }
    }
}
l

Lukas Sztefek

01/06/2021, 2:20 PM
Can you draw what are you want to achieve? Not sure from the description.
t

TheMrCodes

01/06/2021, 2:30 PM
First picture are the resultes with fitMaxHeight(). Second the desired output
j

Jeisson Sáchica

01/06/2021, 2:48 PM
If your Row wraps its content's height, and the Box should match the Row's height, then you must explicitly define the height of the Text, otherwise there is no way to know what the height of everything should be
d

Dominaezzz

01/06/2021, 2:50 PM
ConstraintLayout or Modifier.layout should help here. I can't tell you how to use them sadly.
l

Lukas Sztefek

01/07/2021, 9:15 AM
You could do this:
Copy code
MaterialTheme {
    Column(Modifier.width(200.dp).height(200.dp)) {
        Box(Modifier.weight(1f).fillMaxWidth()) {
            Text("Test")
        }
        Box(
            modifier = Modifier
                .wrapContentHeight()
                .fillMaxWidth()
                .background(Color.Gray)
        ) {
            Text(
                "Title",
                modifier = Modifier
                    .padding(16.dp)
            )
            Box(
                modifier = Modifier
                    .matchParentSize()
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxHeight()
                        .background(Color.Red)
                ) {
                    Text("X")
                }
            }
        }
    }
}
It is important to define “Title” component before “X” component due to correct parent size matching.
3 Views