Jetpack Compose中如何将Scaffold内的Text组件居中显示

问题根源 #

首先明确两个容易混淆的概念：

• textAlign = TextAlign.Center 仅控制Text组件内部的文字相对组件自身的对齐方式，不会改变Text组件在父容器中的位置
• 你当前代码中Scaffold的content区域存在Column和Text两个平级组件，Text没有任何布局约束，默认会排布在父容器的左上角，自然无法居中

解决方案 #

有两种常用实现方式，可根据后续业务场景选择：

方式1：直接给Text添加Modifier（单组件场景最优） #

给Text组件增加填充和居中约束即可，同时注意使用Scaffold传入的paddingValues避免内容被顶部导航栏遮挡：

@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "Top App Bar") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, 
        content = { paddingValues ->
            Text(
                modifier = Modifier
                    .fillMaxSize() // 占满Scaffold的所有可用内容区域
                    .padding(paddingValues) // 适配顶部导航栏的高度偏移
                    .wrapContentSize(Alignment.Center), // 让Text内容自身居中显示
                text = "Content of the page",
                fontSize = 30.sp,
                color = Color.White
            )
        }
    )
}

方式2：用布局容器包裹（多组件场景适用） #

如果后续还要在content区域添加其他组件，可使用Box/Column等布局容器统一控制对齐规则：

content = { paddingValues ->
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
            .background(Color(0xff8d6e63)),
        contentAlignment = Alignment.Center // 容器内所有子组件默认居中
    ) {
        Text(
            text = "Content of the page",
            fontSize = 30.sp,
            color = Color.White
        )
        // 可在此处添加其他子组件
    }
}

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