Jetpack Compose中Row内文本与Switch无法对齐问题求助

问题分析 #

当前代码中NotificationSettingsComposable的Row布局缺少关键配置，导致文本与Switch无法正确对齐：

• Row未设置垂直对齐规则，默认顶部对齐的情况下，Switch与文本行高不匹配，出现视觉错位
• Row未填充父容器宽度，元素挤在一起，无法实现文本靠左、Switch靠右的标准设置项布局
• Switch额外添加的Modifier.align(Alignment.Top)进一步加剧了垂直对齐偏差

修改后的代码 #

仅需调整NotificationSettingsComposable函数即可实现需求：

@Composable
fun NotificationSettingsComposable(checked: Boolean, onCheckedChanged: (Boolean) -> Unit, modifier: Modifier = Modifier) {
    Surface(modifier = modifier.padding(12.dp)) {
        Row(
            modifier = Modifier.fillMaxWidth(), // 让Row占满父容器宽度
            verticalAlignment = Alignment.CenterVertically, // 子元素垂直居中对齐
            horizontalArrangement = Arrangement.SpaceBetween // 元素两端分布
        ) {
            Text(
                text = stringResource(id = R.string.body_enable_notifications), 
                fontSize = 16.sp,
                color = MaterialTheme.colors.onSurface
            )
            Switch(
                checked = checked, 
                onCheckedChange = onCheckedChanged
                // 移除原有的align(Top)修饰符
            )
        }
    }
}

关键修改说明 #

• fillMaxWidth()：确保Row占满可用宽度，让Switch自动靠右侧排列
• verticalAlignment = Alignment.CenterVertically：让文本与Switch在垂直方向居中对齐，解决视觉错位问题
• horizontalArrangement = Arrangement.SpaceBetween：实现文本靠左、Switch靠右的标准设置项布局
• 移除Switch的align(Top)：无需额外顶部对齐，Row的垂直居中配置已满足需求

如果需要支持文本过长自动换行的场景，可给Text添加Modifier.weight(1f)，让文本填充Switch之外的所有空间：

Text(
    text = stringResource(id = R.string.body_enable_notifications), 
    fontSize = 16.sp,
    color = MaterialTheme.colors.onSurface,
    modifier = Modifier.weight(1f)
)

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