Jetpack Compose TextField无法自适应内容宽度问题排查

问题根源 #

TextField默认带有最小宽度约束（默认值为280.dp），即便设置了wrapContentWidth()，这个默认约束依然会让它撑满父容器可用空间；另外你设置的textAlign = TextAlign.Justify也会导致文本强制拉伸宽度，加剧问题。

解决方案 #

1. 移除TextField的默认最小宽度约束，添加Modifier.defaultMinSize(minWidth = 0.dp)
2. 调整文本对齐方式，替换TextAlign.Justify避免不必要的宽度拉伸
3. 修正ConstraintLayout约束逻辑，不让TextField强制占满剩余空间

修改后的代码 #

Row(Modifier.wrapContentSize()) {
    ConstraintLayout(Modifier.wrapContentSize()) {
        val (text1, text2) = createRefs()

        Text(
            modifier = Modifier
                .wrapContentWidth()
                .constrainAs(text1) {
                    end.linkTo(text2.start)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                },
            text = "$",
            color = Color.White,
            fontSize = sp(50),
            fontFamily = FontFamily(Font(R.font.mulish_bold)),
            textAlign = TextAlign.Center
        )

        TextField(
            modifier = Modifier
                .wrapContentWidth()
                .defaultMinSize(minWidth = 0.dp) // 核心：移除默认最小宽度约束
                .constrainAs(text2) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(text1.end)
                    // 不要添加end.linkTo(parent.end)，避免强制占满剩余空间
                }
                .background(Color.Red),
            visualTransformation = {
                val value = if (it.isEmpty()) NUM_0 else it.text
                val amountFormat = notFormatAmount(value).toStringThousandAmount()
                TransformedText(
                    AnnotatedString(amountFormat),
                    OffsetMapping.Identity
                )
            },
            value = text,
            onValueChange = {
                text = it
                onTextChange?.invoke(it.ifEmpty { NUM_0 })
            },
            colors = TextFieldDefaults.textFieldColors(
                textColor = Color.White,
                disabledTextColor = Color.Transparent,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent,
                cursorColor = Color.Transparent
            ),
            textStyle = TextStyle(
                color = Color.White,
                fontFamily = FontFamily(Font(R.font.mulish_bold)),
                textAlign = TextAlign.Start, // 替换对齐方式，避免文本拉伸
                fontSize = sp(50)
            ),
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword)
        )
    }
}

额外说明 #

• 当内容长度过长时，singleLine = true会自动让TextField支持横向滚动，无需硬编码内边距
• 确认notFormatAmount和toStringThousandAmount方法没有返回异常长的文本，避免不必要的宽度问题

内容的提问来源于stack exchange，提问作者Ciro González