MENU

【Jetpack Compose】Composableのサイズを設定する方法

Android Jetpack Compose
記事内に商品プロモーションが含まれる場合があります

Composableのサイズを指定するために、Modifierと呼ばれる修飾子を使用します。

このページでは、Composableのサイズを指定する方法をいくつか紹介します。

目次

幅と高さを個別に設定する場合

Modifier.width()とModifier.height()を使用してサイズを調整します。

@Composable
fun MyComposable() {
    Box(
        modifier = Modifier
            .width(200.dp) // 幅を200dpに
            .height(100.dp) // 高さを100dpに
    ) {
        // Composable contents
    }
}

幅と高さを同じサイズで設定する場合

幅と高さが同じ場合、先ほどのやり方の他にModifier.size()を使用することもできます。

@Composable
fun MyComposable() {
    Box(
        modifier = Modifier.size(200.dp)
    ) {
        // Composable contents
    }
}

この例では、Composableの幅と高さがそれぞれ200dpに設定されます。

画面のサイズいっぱいに広げたい場合

幅いっぱいに広げたい場合はModifier.fillMaxWidth()を、高さをいっぱいに広げたい場合はModifier.fillMaxHeight()を、幅、高さを画面いっぱいに広げたい場合はModifier.fillMaxSize()が使えます。

@Composable
fun MyComposable() {
    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        // Composable contents
    }
}

この例では、Composableが利用可能なスペース全体を占めるようにサイズが設定されます。

Android Jetpack Compose
Share

Comment

コメントする

目次