如何在 TopAppBar 的布局中心对齐标题? [英] How to align title at layout center in TopAppBar?

问题描述

TopAppBar(backgroundColor = Color.Transparent,海拔 = 0.dp，修饰符= Modifier.fillMaxWidth(),导航图标 = {图标按钮(onClick = { TODO },启用 = 真，){图标(画家 = 画家资源(id = R.drawable.icon_back_arrow)，contentDescription = "返回",)}}},标题 = {文本(修饰符 = if (action == null) Modifier.fillMaxWidth() else Modifier,textAlign = if (action == null) TextAlign.Center else TextAlign.Start,最大线数 = 1，text = "你好";)},动作 = {行动?.运行{文本(修饰符 = 修饰符.padding(水平= 16.dp).clickable(onClick = TODO),颜色 = 颜色.绿色，text =取消"，)}}

我是喷气背包的新手，如果 action 为空，我想将 TopAppBar 的标题对齐在中心.标题未对齐布局中心.当没有 navigationIcon 它工作但添加 navigationIcon 它显示稍微正确.如何在布局中心制作标题文本.

解决方案

你必须使用

TopAppBar(
       backgroundColor = Color.Transparent,
       elevation = 0.dp,
       modifier= Modifier.fillMaxWidth(),
       navigationIcon = {
               IconButton(
                   onClick = { TODO },
                   enabled = true,
               ) {
                   Icon(
                       painter = painterResource(id = R.drawable.icon_back_arrow),
                       contentDescription = "Back",
                   )
               }
           }
       },
       title = {
           Text(
               modifier = if (action == null) Modifier.fillMaxWidth() else Modifier,
               textAlign = if (action == null) TextAlign.Center else TextAlign.Start,
               maxLines = 1,
               text = "Hello"
           )
       },
       actions = {
           action?.run {
               Text(
                   modifier = Modifier
                       .padding(horizontal = 16.dp)
                       .clickable(onClick = TODO),
                   color = Color.Green,
                   text ="Cancel",
               )
           }
       } 

I'm new in jetpack and want to align title of TopAppBar at center if action is null. Title is not align center of layout. when there is no navigationIcon it work but adding navigationIcon it show slightly right. How can I do it to make title text at center of layout.

解决方案

You have to use the other constructor of TopAppBar that has no pre-defined slots for content, allowing you to customize the layout of content inside.

You can do something like:

val appBarHorizontalPadding = 4.dp
val titleIconModifier = Modifier.fillMaxHeight()
    .width(72.dp - appBarHorizontalPadding)

TopAppBar(
    backgroundColor = Color.Transparent,
    elevation = 0.dp,
    modifier= Modifier.fillMaxWidth()) {

    //TopAppBar Content
    Box(Modifier.height(32.dp)) {

        //Navigation Icon 
        Row(titleIconModifier, verticalAlignment = Alignment.CenterVertically) {                
            CompositionLocalProvider(
                LocalContentAlpha provides ContentAlpha.high,
            ) {
                IconButton(
                    onClick = { },
                    enabled = true,
                ) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_add_24px),
                        contentDescription = "Back",
                    )
                }
            }
        }

        //Title
        Row(Modifier.fillMaxSize(),
            verticalAlignment = Alignment.CenterVertically) {

            ProvideTextStyle(value = MaterialTheme.typography.h6) {
                CompositionLocalProvider(
                    LocalContentAlpha provides ContentAlpha.high,
                ){
                    Text(
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center,
                        maxLines = 1,
                        text = "Hello"
                    )
                }
            }
        }

        //actions
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Row(
                Modifier.fillMaxHeight(),
                horizontalArrangement = Arrangement.End,
                verticalAlignment = Alignment.CenterVertically,
                content = actions
            )
        }
    }
}

这篇关于如何在 TopAppBar 的布局中心对齐标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！