Jetpack Compose中如何将Column对齐至屏幕底部中心？

错误原因说明 #

1. .weight(1f) 报错：weight 是 ColumnScope 的专属修饰符，仅能用于 Column 的直接子组件，不能直接应用在 Column 本身上。你导入的 ColumnScopeInstance.weight 属于内部 API，外部无法正常访问。
2. .align(Alignment.BottomCenter) 报错：align 修饰符属于 BoxScope，只有当组件是 Box 的直接子项 时才能生效，直接给 Column 添加该修饰符会因不在 Box 作用域内而报错。

方案一：使用 Box 容器实现底部对齐（推荐） #

通过 Box 作为父容器占满屏幕，再将 Column 对齐到 Box 的底部中心：

@Composable
fun SpeedBar() {
    // 父容器Box占满整个屏幕
    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier
                .align(Alignment.BottomCenter) // 在Box作用域内可正常使用align
                .clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp))
                .background(mycolor)
                .fillMaxWidth()
                .padding(15.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.button_image),
                contentDescription = "Button1",
                modifier = Modifier
                    .size(width = 150.dp, height = 150.dp)
                    .clip(RoundedCornerShape(16.dp))
                    .clickable {

                    }
            )

            Button(
                colors = ButtonDefaults.buttonColors(Color.Green),
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .padding(8.dp)
            ) {
                Text(
                    text = "Placeholder",
                    color = Color.White,
                    fontSize = 24.sp
                )
            }
        }
    }
}

方案二：使用 Spacer + weight 实现底部对齐 #

在外层 Column 中添加占满上方空间的 Spacer，将目标 Column 挤到屏幕底部：

@Composable
fun SpeedBar() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Spacer占满上方剩余垂直空间
        Spacer(modifier = Modifier.weight(1f))
        
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier
                .clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp))
                .background(mycolor)
                .fillMaxWidth()
                .padding(15.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.button_image),
                contentDescription = "Button1",
                modifier = Modifier
                    .size(width = 150.dp, height = 150.dp)
                    .clip(RoundedCornerShape(16.dp))
                    .clickable {

                    }
            )

            Button(
                colors = ButtonDefaults.buttonColors(Color.Green),
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .padding(8.dp)
            ) {
                Text(
                    text = "Placeholder",
                    color = Color.White,
                    fontSize = 24.sp
                )
            }
        }
    }
}

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