ScrollableなComposableでコンテンツをレイアウトいっぱいに表示させる方法

verticalScroll　/　horizontalScroll、LazyColumn　/　LazyRow などの Scrollable な Composable の中では、コンテンツのサイズが定まらないため fillMaxSize などを使用してレイアウトいっぱいに何かを表示させることができません。

例えばリストで空の表示を画面いっぱいに出したいとして以下のようなコードを実装してもテキストは真ん中に表示されません。

@Composable
fun Sample() {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Empty state")
            }
        }
    }
}

AndroidView の ScrollView の場合は android:fillViewport="true" を使ってレイアウトいっぱいに表示させていました。

Compose ではこの場合に BoxWithConstraints で外側から Composable のレイアウトのサイズを渡すことで表現することができます。

@Composable
fun Sample() {
    BoxWithConstraints {
        val width = maxWidth
        val height = maxHeight
        LazyColumn(
            modifier = Modifier.fillMaxSize()
        ) {
            item {
                Box(
                    modifier = Modifier.size(width, height),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Empty state")
                }
            }
        }
    }
}

BoxWithConstraints を使うことで Composable がとりうるサイズを取得できるのでとても便利です。