如何移除Jetpack Compose中TopAppBar的左侧默认内边距？

问题原因 #

Material3 的 TopAppBar 组件内部默认会为内容区域添加水平内边距（默认值为 16.dp），这个内边距由组件的 windowInsets 参数控制，而非常规的 Modifier.padding，所以直接调整 padding 无法消除它。

解决方案 #

方案1：覆盖TopAppBar的windowInsets参数

通过设置 windowInsets 为自定义值，直接移除默认的水平内边距。修改后的 CustomBar 代码如下：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomBar() {
    TopAppBar(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Green),
        title = {
            Row(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Blue),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(
                    text = "App",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        },
        // 关键：覆盖默认windowInsets，移除水平内边距
        windowInsets = WindowInsets(0.dp, 0.dp, 0.dp, 0.dp)
    )
}

如果需要保留垂直方向的安全区域内边距（比如适配状态栏），可以更精准地设置：

windowInsets = WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical)

方案2：自定义TopBar布局

如果不需要 TopAppBar 提供的默认交互逻辑（比如导航按钮、菜单等），可以直接用 Row 自定义一个完全可控的顶部栏：

@Composable
fun CustomBar() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp) // 匹配Material3 TopAppBar默认高度
            .background(Color.Green),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "App",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            // 这里可以自由控制内边距，设为0即可完全贴合左侧
            modifier = Modifier.padding(start = 0.dp)
        )
    }
}

补充说明 #

之前尝试的 Modifier.padding(0.dp) 无效，是因为 TopAppBar 的默认内边距是组件内部基于 windowInsets 实现的布局间距，不属于外部修饰符的控制范围，必须通过修改 windowInsets 参数或自定义布局来覆盖。

内容的提问来源于stack exchange，提问作者Ahmed El-Hady