Jetpack Compose如何实现Row布局中TextField组件等间距排列

问题根源 #

你遇到的问题本质是Row默认没有给子组件分配固定比例宽度，你给TextField设置的IntrinsicSize.Max会让组件优先占满所有可用宽度，因此首个TextField会直接占满整行，你之前尝试的fullMaxWidth属性无法解决该逻辑问题。

解决方案 #

给Row内的每个OtpTextField添加weight(1f)修饰符，让Row将总宽度平均分配给每个输入框，不需要硬编码宽度，就能自动适配所有设备尺寸。如果需要避免大尺寸设备上输入框过宽，可额外增加widthIn限制最大宽度。

修改后的代码示例 #

1. 调整OtpTextField定义

首先让OtpTextField支持传入外部modifier，删除原有的硬编码宽度限制：

@Composable
fun OtpTextField(
    modifier: Modifier = Modifier
) {
    TextField(
        maxLines = 1,
        singleLine = true,
        value = "1",
        onValueChange = {},
        modifier = modifier
            .background(
                color = MaterialTheme.colors.surface,
                shape = RoundedCornerShape(5.dp),
            )
            .padding(start = 2.dp, end = 2.dp, top = 4.dp),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Number,
        ),
        textStyle = TextStyle(
            color = MaterialTheme.colors.secondary,
            fontFamily = FontFamily(Font(R.font.poppins_semibold)),
            fontSize = 32.sp, 
            textAlign = TextAlign.Center
        ),
    )
}

2. 修改Row调用逻辑

给每个输入框添加相同权重，实现自动等分宽度：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly,
    verticalAlignment = Alignment.CenterVertically
) {
    // 若要限制最大宽度，可修改为 Modifier.weight(1f).widthIn(max = 60.dp)
    OtpTextField(modifier = Modifier.weight(1f))
    OtpTextField(modifier = Modifier.weight(1f))
    OtpTextField(modifier = Modifier.weight(1f))
    OtpTextField(modifier = Modifier.weight(1f))
    OtpTextField(modifier = Modifier.weight(1f))
}

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