Compose布局问题：OtpTextField无法定位至中心分隔线上方

问题分析 #

你的代码存在两个核心布局问题：

1. T1与T2的位置关系错误：当前T1所在的Column使用fillMaxHeight()会占据剩余全部高度，导致T2被挤到容器底部，无法实现T2在T1上方且T1垂直居中的效果。
2. OtpTextField位置不符合预期：承载Otp和分隔线的Box未设置高度约束，导致align(Alignment.TopCenter)无法基于外层容器的底部定位，最终停留在中间区域。

修正后的代码 #

@Composable
private fun CodeLayout(viewModel: HomeViewModel) {
    MainLayout(viewModel = viewModel)
    Column {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(0.5f)
                .background(Color.White.copy(alpha = 1f))
                .padding(16.dp)
        ) {
            // 保留原图片组件实现
            Image(...)

            // 右上角文本行保留原实现
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 5.dp, end = 10.dp),
                horizontalArrangement = Arrangement.End
            ) {
                Text(...)
            }

            // 处理T1和T2：统一放在垂直居中的Column内
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                // T2 位于T1上方，先渲染T2
                Text(
                    text = "T2内容",
                    modifier = Modifier.padding(bottom = 8.dp) // 可调整与T1的间距
                )
                // T1 垂直居中
                Text(text = "T1内容")
            }

            // 处理OtpTextField和分隔线：让分隔线在容器底部，Otp在其上方
            Box(
                modifier = Modifier.fillMaxSize() // 占满外层Box高度，才能基于底部定位
            ) {
                Divider(
                    color = Color.Blue,
                    thickness = 3.dp,
                    modifier = Modifier.align(Alignment.BottomCenter)
                )
                OtpTextField(
                    modifier = Modifier
                        .align(Alignment.BottomCenter)
                        .padding(bottom = 3.dp + 16.dp), // 分隔线厚度+间距，确保在上方
                    otpText = otpValue,
                    otpCount = 6,
                    onOtpTextChange = { newOtp, isComplete ->
                        otpValue = newOtp
                        if (isComplete) {
                            // 完成逻辑
                        }
                    },
                    onOtpCompleted = {
                        // 完成回调
                    }
                )
            }
        }
    }
}

关键修改点 #

• T1&T2布局：将两者放入同一个Column，通过verticalArrangement = Arrangement.Center让整体垂直居中，调整渲染顺序实现T2在T1上方。
• Otp与分隔线布局：给承载它们的Box添加fillMaxSize()，使其占满外层容器高度；将Otp通过align(Alignment.BottomCenter)定位到底部区域，用padding(bottom)与分隔线拉开距离。
• 层级优化：将右上角文本行单独提取，避免被其他布局组件遮挡或挤压。

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