如何在Jetpack Compose的Row组件中实现文本居中图标居右？

问题原因 #

你当前的代码中，Row 默认按从左到右的顺序排列 Text 和 Image，Text 会紧贴 Row 左侧，Image 紧跟在 Text 右侧，自然无法让 Text 处于整个 Row 的水平中心。若仅给 Text 添加 Modifier.weight(1f)，它会占据剩余空间但默认左对齐，文本内容仍会偏左；即使设置 textAlign = TextAlign.Center，也只是在 Text 自身的宽度范围内居中，而非整个 Row 的中心（因为右侧的 Image 会占用部分空间，导致 Text 的可用宽度小于 Row 总宽度）。

解决方案 #

推荐两种可靠的实现方式：

方式一：使用 Box 嵌套布局（最直观） #

利用 Box 允许子元素重叠布局的特性，让 Text 相对于整个容器居中，Image 固定在右侧：

Box(modifier = Modifier.fillMaxWidth()) {
    Text(
        text = stringResource(id = R.string.home_screen_title),
        fontSize = 16.sp,
        fontFamily = TitleFontFamily,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp,
        color = OnPrimary,
        modifier = Modifier.align(Alignment.Center)
    )
    Image(
        painter = painterResource(id = R.drawable.search),
        contentDescription = stringResource(id = R.string.secret_search_description),
        modifier = Modifier
            .align(Alignment.CenterEnd)
            .padding(12.dp)
    )
}

方式二：使用 Row + Spacer 分配空间 #

通过 Spacer 占据左侧剩余空间，强制 Text 处于 Row 水平中心，Image 固定在右侧：

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    // 占据左侧所有剩余空间，推动 Text 到中心位置
    Spacer(modifier = Modifier.weight(1f))
    
    Text(
        text = stringResource(id = R.string.home_screen_title),
        fontSize = 16.sp,
        fontFamily = TitleFontFamily,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp,
        color = OnPrimary
    )
    
    // Image 直接放在最右侧，不受 Spacer 影响
    Image(
        painter = painterResource(id = R.drawable.search),
        contentDescription = stringResource(id = R.string.secret_search_description),
        modifier = Modifier.padding(12.dp)
    )
}

两种方式都能实现你要的效果，其中 Box 布局更直接，无需依赖空间分配的权重逻辑，适合这种“元素独立定位”的场景。

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