Jetpack Compose中如何实现Surface组件内部元素居中显示

问题原因 #

• Surface 组件的内容槽默认没有内置居中对齐规则，内部子元素默认向顶部起始位置对齐。你之前观察到Icon可居中属于巧合：是设置的childPadding刚好把Icon撑到了居中位置，并非通用的居中逻辑。
• 你给Text设置的textAlign = TextAlign.Center仅控制文本在Text组件自身范围内的对齐，无法解决Text组件本身在Surface父布局中的居中问题。

修复方案 #

在Surface内部嵌套一层铺满父容器的Box，通过Box的contentAlignment属性统一控制内部元素全局居中，修改后的完整代码如下：

import androidx.compose.ui.Alignment

@Composable
fun RoundedShapeWithIconCenter(
    modifier: Modifier = Modifier,
    parentSize : Dp,
    parentBackgroundColor : Color,
    childPadding : Dp,
    icon : Painter,
    iconSize : Dp,
    iconTint : Color,
    elevation : Dp = 0.dp,
    isTextOrIcon : Boolean = false,
    insideText : String = "",
    insideTextColor : Color = colorResource(id = R.color.black),
    fontSize: TextUnit = 16.sp
) {
    Surface(
        modifier = modifier.size(parentSize),
        shape = RoundedCornerShape(50),
        color = parentBackgroundColor,
        elevation = elevation,
    ) {
        // 新增Box作为统一父容器，设置全局居中对齐
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            if (isTextOrIcon) {
                CommonText(
                    value = insideText,
                    fontSize = fontSize,
                    color = insideTextColor,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.padding(childPadding)
                )
            } else {
                Icon(
                    painter = icon,
                    contentDescription = "Back Arrow",
                    modifier = Modifier
                        .size(iconSize)
                        .padding(childPadding),
                    tint = iconTint
                )
            }
        }
    }
}

注意事项 #

• 如果你自定义的CommonText没有开放modifier参数，需要先给CommonText新增可选的modifier入参modifier: Modifier = Modifier，才能给文本正常添加内边距。
• 保留textAlign = TextAlign.Center是为了处理文本超长换行的场景，保证多行文本内部也是居中对齐的。

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