Jetpack Compose 中如何调整TopAppBar布局实现标题居中和右侧加图标

实现方案 #

你需要修改TopAppBar的title配置实现文字居中，同时在actions参数中添加右侧图标即可，修改前请先导入必要依赖：

• import androidx.compose.ui.text.style.TextAlign
• import androidx.compose.material.IconButton

完整修改后的代码如下：

Scaffold(
    scaffoldState = scaffoldState,
    topBar = {
        TopAppBar(
            title = {
                Text(
                    text = stringResource(R.string.account),
                    style = AppFont.PoppinsTypography.subtitle1,
                    // 新增两行配置实现标题居中
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            },
            navigationIcon = {
                // 给返回图标增加点击事件，原返回逻辑位置错误，迁移到此处
                IconButton(onClick = { viewModel.navigateUp() }) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_left),
                        contentDescription = "back", 
                        tint = AppColor.brandColor.BLUE_DE_FRANCE
                    )
                }
            }, 
            // 在actions中配置右侧图标
            actions = {
                IconButton(onClick = { /* 按需替换为右侧图标对应的点击逻辑 */ }) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_your_icon), // 替换为你的右侧图标资源ID
                        contentDescription = "右侧操作",
                        tint = AppColor.brandColor.BLUE_DE_FRANCE // 按需调整图标颜色
                    )
                }
            }, 
            backgroundColor = AppColor.neutralColor.DOCTOR
        )
    },
)

补充说明 #

如果需要标题完全无视左右图标占宽，在整个TopAppBar的宽度范围内居中，可以给Text的modifier额外添加padding(end = 48.dp)，抵消右侧actions区域默认占用的宽度，和左侧导航图标的占宽保持一致即可。actions中支持添加多个图标，会自动横向排列。

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