对齐框底部的字段

Question

我制作了一个占据屏幕高度一半的盒子，其中有几个文本视图，我想添加一个我制作的 OtpTextField 并将其放在中心线上方。我错过了什么，似乎找不到办法做到这一点

@

Composable
private fun PinLayout(viewModel: HomeViewModel) {
    MainLayout(viewModel = viewModel)
    Column {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(0.5f)
                .background(Color.White.copy(alpha = 1f))
                .padding(16.dp)
        ) {
            Image(
                painter = painterResource(id = R.mipmap.lock),
                contentDescription = null,
                modifier = Modifier
                    .fillMaxSize()
                    .align(Alignment.BottomCenter)
                    .padding(bottom = 64.dp, top = 10.dp)
            )

            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(start = 10.dp, end = 10.dp, bottom = 10.dp)
            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 5.dp, end = 10.dp),
                    horizontalArrangement = Arrangement.End
                ) {
                    Text( .... )
                }

                Text( ... )

                var otpValue by remember { mutableStateOf("") }

                Box(
                    modifier = Modifier
                        .fillMaxHeight()
                ) {
                    OtpTextField(
                        modifier = Modifier
                            .padding(16.dp)
                            .align(Alignment.BottomEnd),
                        otpText = otpValue,
                        otpCount = 6,
                        onOtpTextChange = { newOtp, isComplete ->
                            otpValue = newOtp
                            if (isComplete) {
                                //
                            }
                        },
                        onOtpCompleted = {
                            //
                        }
                    )
                }
            }
        }

        Box(Modifier.fillMaxWidth()) {
            Divider(
                color = Color.Blue,
                thickness = 3.dp,
                modifier = Modifier
                    .fillMaxWidth()
                    .align(Alignment.BottomCenter)
            )
        }
    }
}

我尝试过添加垫片、调整配重、对齐等等。而且好像也没有太大的动静 现在它停留在中间并且不想去下面 非常感谢任何帮助

Answer 1

您有多个填充应用于

OtpTextField

：外部

.padding(16.dp)

的

Box

、

.padding(start = 10.dp, end = 10.dp, bottom = 10.dp)

的

Column

以及

.padding(16.dp)

本身的

OtpTextField

。

您可以删除外部

Box

的底部填充：

.padding(start = 16.dp, end = 16.dp, top = 16.dp)

并将

OtpTextField

移出

Column

，如下所示：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight(0.5f)
        .background(Color.White.copy(alpha = 1f))
        .padding(start = 16.dp, end = 16.dp, top = 16.dp)
) {
    Image(...)

    Column( ...
    ) {
        Row( ...
        ) {
            Text( ... )
        }
        Text( ... )
    }
    var otpValue by remember { mutableStateOf("") }
    // otp
    OtpTextField(
        modifier = Modifier
            .padding(start = 16.dp, end = 16.dp, top = 16.dp)
            .align(Alignment.BottomEnd),
        ....
    )
}