Jetpack Compose中Column的verticalArrangement=Arrangement.Bottom不生效问题

问题原因 #

你的Column没有占据父容器（Box）的全部高度，默认情况下Column的高度是包裹内容的，此时verticalArrangement = Arrangement.Bottom无法生效——因为没有多余的垂直空间让子元素向底部对齐。

解决方案 #

给Column添加Modifier.fillMaxHeight()（或Modifier.fillMaxSize()，若需要同时占满宽度），让Column填满父容器的整个高度，这样Arrangement.Bottom就能正常工作，将内部元素整体对齐到底部。

修改后的代码示例 #

Box(modifier = Modifier
    .fillMaxSize()
    .background(color = TVTheme.colors.blue)
) {

val bigPadding = 334.dp
val smallPadding = 24.dp

    Column(
        modifier = Modifier.fillMaxHeight(), // 添加这一行
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Image(
            modifier = Modifier
                .requiredSize(128.dp, 17.dp),
            icon = R.drawable.calendar_a_icon
        )
        

        // title
        val title = "Lorem Ipsum Dolor Sit"
        if (title.isNotEmpty()) {
            Text(
                text = title,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .padding(top = dimensionResource(id = R.dimen.vertical), start = bigPadding, end = bigPadding),
                overflow = TextOverflow.Visible
            )
        }

        // body
        val body = "Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit."
        if (body.isNotEmpty()) {
            Text(
                text = body,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .padding(top = dimensionResource(id = R.dimen.vertical), start = bigPadding, end = bigPadding),
                overflow = TextOverflow.Visible
            )
        }

        Row(
            modifier = Modifier
                .padding(top = 44.dp, bottom = smallPadding, start = smallPadding, end = smallPadding)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {

            val text = AnnotatedString.Builder(item.skipButtonText).toAnnotatedString()

            ClickableText(
                maxLines = 1,
                text = "Skip",
                onClick = {
                    skip()
                }
            )

            Pager(
                modifier = Modifier
                    .align(Alignment.CenterVertically),
                index = currentPageIndex,
                pageNumbers = totalPages)
        }
    }
}

补充说明 #

如果需要Column仅在垂直方向占满父容器，保持水平方向包裹内容，用Modifier.fillMaxHeight()即可；如果需要水平方向也占满，就用Modifier.fillMaxSize()，两种方式都能让Arrangement.Bottom生效。

内容的提问来源于stack exchange，提问作者Ralf Wickum