Composableのサイズを指定するために、Modifier
と呼ばれる修飾子を使用します。
このページでは、Composableのサイズを指定する方法をいくつか紹介します。
目次
幅と高さを個別に設定する場合
Modifier.width()
とModifier.height()
を使用してサイズを調整します。
@Composable
fun MyComposable() {
Box(
modifier = Modifier
.width(200.dp) // 幅を200dpに
.height(100.dp) // 高さを100dpに
) {
// Composable contents
}
}
![](https://seeds-digital.com/wp-content/uploads/2024/03/03b2e1e3c403871cb50276c451363881-1024x573.png)
幅と高さを同じサイズで設定する場合
幅と高さが同じ場合、先ほどのやり方の他にModifier.size()
を使用することもできます。
@Composable
fun MyComposable() {
Box(
modifier = Modifier.size(200.dp)
) {
// Composable contents
}
}
この例では、Composableの幅と高さがそれぞれ200dpに設定されます。
![](https://seeds-digital.com/wp-content/uploads/2024/03/d33e80ea8812665f75b11cdc18c58df0.png)
画面のサイズいっぱいに広げたい場合
幅いっぱいに広げたい場合はModifier.fillMaxWidth()
を、高さをいっぱいに広げたい場合はModifier.fillMaxHeight()
を、幅、高さを画面いっぱいに広げたい場合はModifier.fillMaxSize()
が使えます。
@Composable
fun MyComposable() {
Box(
modifier = Modifier.fillMaxSize()
) {
// Composable contents
}
}
![](https://seeds-digital.com/wp-content/uploads/2024/03/256295926b3cf53939d50b7a7f8b8c84.png)
この例では、Composableが利用可能なスペース全体を占めるようにサイズが設定されます。
Comment