高さ・幅を計算できるOnGloballyPositionedとは？ - Jetpack Compose

一部のコンポーネントの高さを測り、ほかのコンポーネントに使用したいことがあると思います
そんなときに使えるOnGloballyPositionedをまとめています！

コード

val localDensity = LocalDensity.current
var height by remember {
    mutableStateOf(0.dp)
}

Text( // 高さを測りたいコンポーネント
    text = "Hello World",
    modifier = Modifier
        .onGloballyPositioned { coordinates ->
            height = with(localDensity) {
                coordinates.size.height.toDp() // 高さをdpで取得
                // coordinates.size.width.toDp() // こちらは幅をdpで取得
            }
        }
)

詳細

onGloballyPositionedは、コンポーネントの座標が変更されると「{ ... }」が実行されるModifierの拡張関数です
この時、レイアウトの座標情報(LayoutCoorinatesクラス)が渡されます

上記の例では、コンポーネントの座標変更時に9行目から12行目の{ }が実行されます
渡されたレイアウトの座標情報をcoordinatesという名前で管理し、それを使用して欲しい情報を取得しています

注意

この関数はレイアウトの座標情報(LayoutCoorinatesクラス)が利用可能になると呼び出され、その後はウィンドウ内で要素の座標が変わるたびに呼び出されます
しかし毎回呼ばれることを保証してはいないようです

おまけ

親要素の高さや幅を測る方法は下記のとおりです

val localDensity = LocalDensity.current
var parentHeight by remember {
    mutableStateOf(0.dp)
}

Box {
    Spacer(modifier = Modifier.height(50.dp))
    
    Text(
        text = "Hello World",
        modifier = Modifier
            .onGloballyPositioned { coordinates ->
                parentHeight = with(localDensity) {
                    // 高さをdpで取得
                    coordinates.parentLayoutCoordinates?.size?.height?.toDp() ?: 0.dp
                    
                    // こちらは幅をdpで取得
                    // coordinates.parentLayoutCoordinates?.size?.width?.toDp() ?: 0.dp
                }
            }
    )
}

おわりに

何かありましたらお気軽にご連絡ください！
「いいね」もお願いします！！

個人ブログではQiitaに載せきれていない内容もあるので、ご興味ありましたら是非みてください！！