Jetpack Compose中TextField额外内边距导致文本截断问题排查

额外内边距的核心原因 #

BasicTextField 默认依赖 BasicTextFieldDefaults.TextFieldDecorationBox 作为内部装饰容器，这个装饰盒自带默认水平内边距（默认值为16dp），这就是你看到首尾额外空白的根源。哪怕你调整外部组件的大小或设置WindowInsets，这个内部装饰层的内边距依然会生效，压缩文本显示区域，进而触发不必要的滚动。

文本截断的关联原因 #

输入“12”时首字符截断，和内边距问题直接相关：

• 默认内边距挤压了文本的可用显示空间，当TextField宽度固定时，文本的实际绘制范围被缩小，短文本也可能因布局约束出现截断。
• 若未显式设置 textAlign = TextAlign.Center，文本默认左对齐，加上内边距的影响，首字符的绘制范围可能被截断。

解决思路（附代码示例） #

要彻底解决问题，需要替换默认装饰盒，清除内部内边距：

BasicTextField(
    value = amountText,
    onValueChange = { /* 金额文本更新逻辑 */ },
    modifier = Modifier
        .width(220.dp)
        .height(50.dp)
        .background(Color.LightGray),
    textStyle = TextStyle(textAlign = TextAlign.Center, fontSize = 20.sp),
    // 自定义装饰盒，消除默认内边距
    decorationBox = { innerTextField ->
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            innerTextField()
        }
    }
)

• 通过自定义 decorationBox 绕开默认的TextFieldDecorationBox，直接用Box包裹输入框内容，彻底消除默认内边距。
• 设置 textAlign = TextAlign.Center 确保文本居中，同时让TextField的尺寸足够容纳最长预期文本（比如固定宽度或使用wrapContentWidth()）。

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