关于Jetpack Compose中BasicTextField默认宽度的技术问询

嘿，我猜你在Jetpack Compose里使用BasicTextField时，应该是碰到了默认宽度不符合预期的问题吧？先看看你贴的这段代码片段：

@Composable fun BasicInputTextField(
    modifier: Modifier = Modifier,
    height: Int = R.dimen.cgux_text_field_normal_height,
) {
    var text by remember { mutableStateOf("Hello") }

    Box(
        modifier = modifier
            .height(dimensionResource(id = height))
            .border(1.dp, Color.Gray, shape = RoundedCornerShape(4.dp)),
        contentAlignment = Alignment.CenterStart,
    ) {
        BasicTextField(
            modifier = Modifier.padding(horizont...
        )
    }
}

默认情况下，BasicTextField的宽度是wrapContent的——也就是说它只会包裹当前输入内容的宽度，这显然不是大多数场景下我们想要的输入框样式。

给你几个实用的解决方案：

• 如果想让输入框占满父容器的宽度：给BasicTextField的Modifier加上fillMaxWidth()，同时别忘了给外层的Box也加上fillMaxWidth()（如果Box本身没有设置宽度的话），这样整个输入框就能铺满父布局的可用宽度。
• 如果需要固定宽度：可以用width()指定具体尺寸，比如width(250.dp)，或者用widthIn()设置宽度的范围，比如widthIn(min = 150.dp, max = 300.dp)。
• 另外，记得给TextField加上合适的内边距，避免输入的文字直接贴到边框上，提升视觉体验。

下面是修改后的完整示例代码，你可以参考：

@Composable
fun BasicInputTextField(
    modifier: Modifier = Modifier,
    height: Int = R.dimen.cgux_text_field_normal_height,
) {
    var text by remember { mutableStateOf("Hello") }

    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(dimensionResource(id = height))
            .border(1.dp, Color.Gray, shape = RoundedCornerShape(4.dp)),
        contentAlignment = Alignment.CenterStart,
    ) {
        BasicTextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp)
        )
    }
}

这样调整后，输入框的宽度就会符合你的预期啦，你可以根据自己的需求修改宽度相关的参数~

备注：内容来源于stack exchange，提问作者Android_programmer_office