如何去除Jetpack Compose TopAppBar导航图标与操作区的默认内边距？

问题描述 #

需移除TopAppBar容器（黄色区域）与navigationIcon、actions（红色区域）之间的默认内边距，代码未手动设置内边距，该间距来自组件默认样式，尝试设置windowInsets为0.dp无效。

解决方案 #

Material3的TopAppBar组件默认通过contentPadding参数控制内部元素与容器的间距，默认值为TopAppBarDefaults.ContentPadding，包含水平方向的内边距。只需自定义该参数即可移除默认间距：

修改RootTopAppBar中的TopAppBar组件，添加contentPadding参数并设置水平内边距为0：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RootTopAppBar(title: String, menuChar: Char) {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
 
    TopAppBar(
        colors = topAppBarColors(
            containerColor = Color.Yellow
        ),
        title = {
            Text(
                modifier = Modifier.padding(start = 12.dp).background(Color.Blue),
                text = title
            )
        },
        navigationIcon = {
            Box(
                modifier = Modifier
                    .size(31.dp)
                    .border(1.dp, MaterialTheme.colorScheme.onPrimary, CircleShape).background(Color.Red),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "$menuChar",
                    fontWeight = FontWeight.Bold
                )
            }
        },
        actions = {
                Icon(
                    modifier = Modifier.background(Color.Red),
                    painter = painterResource(R.drawable.ic_plus),
                    contentDescription = "Localized description"
                )
        },
        scrollBehavior = scrollBehavior,
        // 移除默认水平内边距
        contentPadding = PaddingValues(horizontal = 0.dp)
    )
}

精细调整（可选） #

如果需要单独控制某一侧的间距，比如只移除左侧navigationIcon的内边距，可单独设置对应方向的padding：

contentPadding = PaddingValues(start = 0.dp, end = TopAppBarDefaults.ContentPadding.end)

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