MediumTopAppBar Material3只更改大标题

Question

我正在与MediumTopAppBar合作，我试图改变大标题的textStyle，而不破坏小标题。

所以我要做的是：

MediumTopAppBar(
                title = { HeadlineLargeBlackText(text = "pageTitle") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed.invoke() }) {
                        Icon(
                            imageVector = Icons.Filled.ArrowBack,
                            contentDescription = stringResource(id = R.string.action_back)
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )

我的问题是，当我将其设置为"HeadlineLargeBlackText“时，它会自动更改大文本和小文本的文本样式，因此它看起来如下(大文本和小文本都可见的图像)：

​

​

我想要的是底部是大的，顶部是小的。

当我进入MediumTopAppBar时，我确实看到大的和小的textStyle在TwoRowsTopAppBar中被设置为：

   titleTextStyle = MaterialTheme.typography.fromToken(TopAppBarMediumTokens.HeadlineFont),
    smallTitleTextStyle = MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),

但是ofc这个方法是私有的://所以我想知道，是否有可能以某种方式单独访问这些大/小的文本？

Answer 1

目前，MediumTopAppBar在主题中使用使用排版属性定义的titleLarge和headlineSmall文本样式。

您可以通过以下方式在主题中定义它们：

val customTypography = androidx.compose.material3.Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22. sp,
        lineHeight = 28. sp,
        letterSpacing = 0. sp
    ),
    headlineSmall = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16. sp,
        lineHeight = 24. sp,
        letterSpacing = 0.15.sp
    ),
)

如果您不习惯将它们应用于整个应用程序，您可以只将自定义主题应用于MediumTopAppBar，如下所示：

  Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {

            AppTheme {
                MediumTopAppBar(
                    title = {
                        androidx.compose.material3.Text(
                            "Medium TopAppBar",
                            maxLines = 1,
                            overflow = TextOverflow.Ellipsis
                        )
                    },
                    //....
                )
            },
            //....  
  }

哪里

fun AppTheme(
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    //...
    aMaterialTheme(
        colorScheme = colors,
        typography = customTypography,
        content = content
    )
}

​

​