如何更改 jetpack compose 中 TopAppBar 的位置

Question

我想将“Account”文本设置到TopAppBar的中心，并在TopAppBar的右侧添加一个图标，我该怎么做？

 Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        text = stringResource(R.string.account),
                        style = AppFont.PoppinsTypography.subtitle1
                    )
                },
                navigationIcon = {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_left),
                        contentDescription = "back", tint = AppColor.brandColor.BLUE_DE_FRANCE
                    )
                }, actions = {
                    viewModel.navigateUp()
                }, backgroundColor = AppColor.neutralColor.DOCTOR
            )
        },
    )

Answer 1

要将标题文本与 的中心对齐TopAppbar，

更新

使用材料3

CenterAlignedTopAppBar( 标题 = { 文本( 文本 = stringResource(R.string.account), 样式 = AppFont.PoppinsTypography.subtitle1 ) }, )

并且actions属性应该在末尾添加可组合项。使用它在 的右侧添加一个图标TopAppBar。

例子，

actions = {
    IconButton(onClick = { /*TODO*/ }) {
        Icon(
            imageVector = Icons.Rounded.ShoppingCart,
            contentDescription = "cart",
        )
     }
 },

旧答案，使用材质 2

改成title这样，

title = {
    Text(
        text = stringResource(R.string.account),
        textAlign = TextAlign.Center,
        modifier = Modifier.fillMaxWidth(),
        style = AppFont.PoppinsTypography.subtitle1
    )
},