ConstraintLayout布局下长文本换行与描述范围控制问题咨询

针对你遇到的两个ConstraintLayout布局问题，以下是修改后的代码及说明：

ConstraintLayout {
    val (icon, configHeading, enableConfigRequestsSwitch, configDescription) = createRefs()
    Icon(
        painter = painterResource(id = R.drawable.ic_config_requests),
        tint = Color.White,
        contentDescription = null,
        modifier = Modifier
            .constrainAs(icon) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
            }
            .padding(end = 10.dp)
    )
    Text(
        style = MaterialTheme.typography.bodyMedium,
        text = stringResource(id = R.string.charger_advanced_settings_enable_config_requests),
        color = Color.White,
        modifier = Modifier
            .constrainAs(configHeading) {
                top.linkTo(parent.top)
                start.linkTo(icon.end)
                // 限制标题右端到Switch左端，避免被遮挡
                end.linkTo(enableConfigRequestsSwitch.start)
                // 设置宽度匹配约束范围，触发自动换行
                width = Dimension.fillToConstraints
            }
            // 标题与Switch之间保留间距
            .padding(end = 16.dp)
    )
    Switch(
        checked = state.isAllowInstallerMode,
        onCheckedChange = onAllowInstallerModeChanged,
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.White,
            checkedTrackColor = MaterialTheme.colorScheme.primary,
            uncheckedThumbColor = Color.White,
            uncheckedTrackColor = Color.LightGray
        ),
        modifier = Modifier
            .constrainAs(enableConfigRequestsSwitch) {
                top.linkTo(icon.top)
                bottom.linkTo(icon.bottom)
                end.linkTo(parent.end)
                // Switch左侧留间距，避免与标题贴靠
                start.margin = 16.dp
            }
    )
    Text(
        style = MaterialTheme.typography.labelLarge,
        text = stringResource(id = R.string.charger_advanced_settings_allow_request_access_desc),
        color = Color.White,
        modifier = Modifier
            .constrainAs(configDescription) {
                top.linkTo(configHeading.bottom)
                start.linkTo(configHeading.start)
                // 限制描述右端到Switch左端，确保内容不越界
                end.linkTo(enableConfigRequestsSwitch.start)
                // 设置宽度匹配约束范围，让内边距生效
                width = Dimension.fillToConstraints
            }
            .padding(
                top = 16.dp,
                end = 16.dp
            )
    )
}

关键修改说明： #

1. 解决configHeading被遮挡且不换行问题：

   • 通过end.linkTo(enableConfigRequestsSwitch.start)明确标题的右端边界，阻止文本延伸到Switch区域。
   • 设置width = Dimension.fillToConstraints（等效于0.dp），让Text宽度匹配start到end的约束范围，文本超出时自动换行。
   • 添加padding(end = 16.dp)，保证标题与Switch之间的视觉间距。

2. 解决configDescription内边距不生效、内容超出问题：

   • 同样用end.linkTo(enableConfigRequestsSwitch.start)限制描述的右端边界。
   • 设置width = Dimension.fillToConstraints，让文本宽度被约束在指定范围内，此时padding(end = 16.dp)会在该范围内生效，内容不会超出Switch右端。

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