Jetpack Compose中Text内边距无效及文本截断问题咨询

在Jetpack Compose中使用ConstraintLayout时，遇到长文本的Text组件末尾截断的问题：给该Text添加16.dp的右侧内边距后，文本依然截断；只有将内边距调整为26.dp时，文本才会自动换行。请问为什么16.dp的内边距无法生效？有没有无需调整内边距就能让文本自动换行的方法？

原代码 #

fun PCapSection(
    state: ESettingsTileState,
    onPCapSelected: () -> Unit
) {
    ConstraintLayout(
        modifier = Modifier
            .background(
                brush = Brush.horizontalGradient(
                    colors = listOf(
                        md_theme_lucent_blue_start,
                        md_theme_lucent_blue_end
                    )
                )
            )
            .fillMaxWidth()
            .clickable {
                onPCapSelected()
            }
    ) {
        val (dollarIcon, pCapTitleText, pCapValueText) = createRefs()
        Icon(
            painter = painterResource(id = R.drawable.p_cap_dollar),
            modifier = Modifier
                .size(26.dp)
                .constrainAs(dollarIcon) {
                    start.linkTo(parent.start, margin = 16.dp)
                    top.linkTo(parent.top, margin = 20.dp)
                },
            tint = Color.White,
            contentDescription = null
        )
        Text(
            text = stringResource(id = R.string.home_screen_e_settings_p_cap),
            style = MaterialTheme.typography.labelMedium,
            color = md_theme_light_onPrimary,
            modifier = Modifier
                .constrainAs(pCapTitleText) {
                    start.linkTo(dollarIcon.end, 10.dp)
                    top.linkTo(dollarIcon.top)
                }
        )
        Text(
            text = "state of charge 1234567891234567",
            style = MaterialTheme.typography.titleSmall,
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier
                .constrainAs(pCapValueText) {
                    top.linkTo(pCapTitleText.bottom, margin = 12.dp)
                    start.linkTo(pCapTitleText.start)
                    bottom.linkTo(parent.bottom, margin = 20.dp)
                }
                .padding(end = 16.dp)
        )
    }
}

问题原因 #

核心问题是长文本的Text组件没有设置右侧约束：在ConstraintLayout中，pCapValueText只定义了start、top、bottom约束，没有限制它的end边界。这意味着Text的布局宽度可以无限延伸，超出父容器的可视范围。添加16.dp的内边距只是让文本内容向右偏移，但Text本身的宽度不受限，所以文本依然会超出容器被截断；只有当内边距大到让文本内容的总长度超过可视区域时，才会触发自动换行。

解决方法 #

无需调整内边距，只需给Text添加右侧约束，限制其最大宽度即可：

方法1：添加end约束到父容器

修改pCapValueText的约束配置，添加end.linkTo(parent.end, margin = 16.dp)，这样Text的宽度会被限制在父容器的start到end范围内，自动换行：

Text(
    text = "state of charge 1234567891234567",
    style = MaterialTheme.typography.titleSmall,
    color = MaterialTheme.colorScheme.primary,
    modifier = Modifier
        .constrainAs(pCapValueText) {
            top.linkTo(pCapTitleText.bottom, margin = 12.dp)
            start.linkTo(pCapTitleText.start)
            bottom.linkTo(parent.bottom, margin = 20.dp)
            // 添加右侧约束，限制宽度
            end.linkTo(parent.end, margin = 16.dp)
        }
)

方法2：配合fillMaxWidth()使用

如果需要Text占满剩余宽度，也可以给Text的modifier添加fillMaxWidth()，同时保留end约束，确保宽度被正确限制：

Text(
    text = "state of charge 1234567891234567",
    style = MaterialTheme.typography.titleSmall,
    color = MaterialTheme.colorScheme.primary,
    modifier = Modifier
        .fillMaxWidth()
        .constrainAs(pCapValueText) {
            top.linkTo(pCapTitleText.bottom, margin = 12.dp)
            start.linkTo(pCapTitleText.start)
            bottom.linkTo(parent.bottom, margin = 20.dp)
            end.linkTo(parent.end, margin = 16.dp)
        }
)

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