如何修改Jetpack Compose中MediumTopBar的默认底部内边距？

我正尝试修改Jetpack Compose中MediumTopAppBar默认的24.dp底部内边距。查看其实现代码可知，它通过调用TwoRowsTopAppBar并传入固定的MediumTitleBottomPadding（值为24.dp）来设置底部内边距：

@Composable
fun MediumTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    collapsedHeight: Dp = TopAppBarDefaults.MediumAppBarCollapsedHeight,
    expandedHeight: Dp = TopAppBarDefaults.MediumAppBarExpandedHeight,
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
) =
    TwoRowsTopAppBar(
        modifier = modifier,
        title = title,
        titleTextStyle = TopAppBarMediumTokens.HeadlineFont.value,
        smallTitleTextStyle = TopAppBarSmallTokens.HeadlineFont.value,
        titleBottomPadding = MediumTitleBottomPadding,
        smallTitle = title,
        navigationIcon = navigationIcon,
        actions = actions,
        collapsedHeight =
            if (collapsedHeight == Dp.Unspecified || collapsedHeight == Dp.Infinity) {
                TopAppBarDefaults.MediumAppBarCollapsedHeight
            } else {
                collapsedHeight
            },
        expandedHeight =
            if (expandedHeight == Dp.Unspecified || expandedHeight == Dp.Infinity) {
                TopAppBarDefaults.MediumAppBarExpandedHeight
            } else {
                expandedHeight
            },
        windowInsets = windowInsets,
        colors = colors,
        scrollBehavior = scrollBehavior
    )

解决方案：无需完全重写组件 #

你不需要重新实现整个MediumTopAppBar，有两种简便方式修改这个内边距：

1. 直接调用底层的TwoRowsTopAppBar

MediumTopAppBar本质是对TwoRowsTopAppBar的封装，仅固定了部分参数（包括titleBottomPadding）。你可以直接使用TwoRowsTopAppBar，手动传入自定义的底部内边距值：

@Composable
fun CustomMediumTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    collapsedHeight: Dp = TopAppBarDefaults.MediumAppBarCollapsedHeight,
    expandedHeight: Dp = TopAppBarDefaults.MediumAppBarExpandedHeight,
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
) =
    TwoRowsTopAppBar(
        modifier = modifier,
        title = title,
        titleTextStyle = TopAppBarMediumTokens.HeadlineFont.value,
        smallTitleTextStyle = TopAppBarSmallTokens.HeadlineFont.value,
        // 替换为你需要的内边距，比如16.dp
        titleBottomPadding = 16.dp,
        smallTitle = title,
        navigationIcon = navigationIcon,
        actions = actions,
        collapsedHeight =
            if (collapsedHeight == Dp.Unspecified || collapsedHeight == Dp.Infinity) {
                TopAppBarDefaults.MediumAppBarCollapsedHeight
            } else {
                collapsedHeight
            },
        expandedHeight =
            if (expandedHeight == Dp.Unspecified || expandedHeight == Dp.Infinity) {
                TopAppBarDefaults.MediumAppBarExpandedHeight
            } else {
                expandedHeight
            },
        windowInsets = windowInsets,
        colors = colors,
        scrollBehavior = scrollBehavior
    )

2. 封装带可配置内边距的自定义版本

如果需要在多个地方复用，且希望保留类似MediumTopAppBar的调用体验，可以给自定义组件添加一个可配置的内边距参数：

@Composable
fun CustomMediumTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    collapsedHeight: Dp = TopAppBarDefaults.MediumAppBarCollapsedHeight,
    expandedHeight: Dp = TopAppBarDefaults.MediumAppBarExpandedHeight,
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null,
    // 添加自定义内边距参数，默认沿用原24.dp
    titleBottomPadding: Dp = 24.dp
) =
    TwoRowsTopAppBar(
        modifier = modifier,
        title = title,
        titleTextStyle = TopAppBarMediumTokens.HeadlineFont.value,
        smallTitleTextStyle = TopAppBarSmallTokens.HeadlineFont.value,
        titleBottomPadding = titleBottomPadding,
        smallTitle = title,
        navigationIcon = navigationIcon,
        actions = actions,
        collapsedHeight =
            if (collapsedHeight == Dp.Unspecified || collapsedHeight == Dp.Infinity) {
                TopAppBarDefaults.MediumAppBarCollapsedHeight
            } else {
                collapsedHeight
            },
        expandedHeight =
            if (expandedHeight == Dp.Unspecified || expandedHeight == Dp.Infinity) {
                TopAppBarDefaults.MediumAppBarExpandedHeight
            } else {
                expandedHeight
            },
        windowInsets = windowInsets,
        colors = colors,
        scrollBehavior = scrollBehavior
    )

使用时直接指定需要的内边距即可：

CustomMediumTopAppBar(
    title = { Text("自定义内边距标题") },
    titleBottomPadding = 12.dp
)

核心思路 #

MediumTopAppBar只是Jetpack Compose提供的封装层，底层依赖的TwoRowsTopAppBar已经暴露了titleBottomPadding参数供自定义。通过直接使用底层组件或轻量封装，就能快速修改底部内边距，无需从零实现整个TopBar逻辑。

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