Jetpack Compose中TopAppBar的fillMaxSize与textAlign失效问题求助

方案一：使用TopAppBar自带的居中参数 #

在Material3的TopAppBar中，直接设置titleCentered = true即可让标题自动居中，无需额外调整Text的对齐属性：

Scaffold(
    containerColor = Color(33, 17, 52),
    topBar = {
        TopAppBar(
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = Color(33, 17, 52),
                titleContentColor = Color.White,
            ),
            title = {
                Text(
                    "Shoes Marketplace",
                    fontWeight = FontWeight.Bold,
                )
            },
            titleCentered = true // 开启标题居中
        )
    },
    modifier = Modifier.fillMaxSize()
) { innerPadding ->
    // 页面内容，记得使用innerPadding避免被TopAppBar遮挡
}

方案二：手动设置Text的宽度填充 #

如果不想使用自带参数，给Text添加Modifier.fillMaxWidth()，结合textAlign = TextAlign.Center即可让文字在标题区域内居中。注意不要用fillMaxSize()，它会让Text的高度撑满整个TopAppBar，超出布局范围导致标题被隐藏：

Scaffold(
    containerColor = Color(33, 17, 52),
    topBar = {
        TopAppBar(
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = Color(33, 17, 52),
                titleContentColor = Color.White,
            ),
            title = {
                Text(
                    "Shoes Marketplace",
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.fillMaxWidth() // 填充标题区域宽度
                )
            },
        )
    },
    modifier = Modifier.fillMaxSize()
) { innerPadding ->
    // 页面内容
}

问题原因解释 #

• 设置textAlign = TextAlign.Center无效，是因为Text默认只占据自身文字宽度的空间，居中是在这个小范围内生效，视觉上和左对齐无区别。
• 使用Modifier.fillMaxSize()导致标题消失，是因为该修饰符让Text的高度和宽度都撑满整个TopAppBar，但TopAppBar内部有默认布局约束，超出范围的内容会被裁剪或隐藏。

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