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

Guilherme Delgado

05/20/2022, 1:45 PM
I have a Column with
verticalArrangement = Arrangement.SpaceBetween
and if it’s
Surface
parent defines
.fillMaxSize()
, the Column’s height is not respected. More in thread
Copy code
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MixCalcTheme {
                Surface {
                    Ui()
                }
            }
        }
    }
}
Copy code
@Composable
@Preview
private fun Ui() {
    Column(
        modifier = Modifier
            .padding(horizontal = 20.dp, vertical = 50.dp)
            .fillMaxWidth()
            .height(250.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceBetween
    ) { ... }
...
}
output:
with:
Copy code
Surface(Modifier.fillMaxSize()) {
    Ui()
}
the result is:
why?
I want SpaceBetween inside a 250.dp of height Column…
a

Albert Chang

05/20/2022, 1:50 PM
Because
Surface
propergates min size constraints. You can add
Modifier.wrapContentHeight()
before
Modifier.height(250.dp)
.
1
g

Guilherme Delgado

05/20/2022, 1:56 PM
Had to add also:
Copy code
Surface(Modifier.fillMaxSize()) {
    Box(contentAlignment = TopCenter) {
        Ui()
    }
}
to make it align top otherwise it would be rendered in the center
But adding the Box makes
wrapContentHeight()
not needed
But, yeah, your response helped 🙂 👍
a

Albert Chang

05/20/2022, 1:59 PM
You can use
Modifier.wrapContentHeight(align = <http://Alignment.Top|Alignment.Top>)
.
1
g

Guilherme Delgado

05/20/2022, 2:00 PM
Perfect! 👌
4 Views