如何减少Jetpack Compose中TopAppBar导航图标与标题的水平间距

该问题是Material Design规范下TopAppBar的默认内置间距导致，目前Material 2版本的TopAppBar未暴露直接调整该间距的参数，可通过以下三种方案解决：

你需要调整的是下图标注的间距区域：

方案1：快捷偏移调整 #

无需修改整体结构，直接给标题组件添加负的起始内边距即可缩小间距，适合小幅度调整的场景：

@Composable
fun DetailsAppBar(coin: Coin, backAction: () -> Unit) {
    TopAppBar(
        navigationIcon = {
            IconButton(onClick = { backAction() }) {
                Icon(
                    imageVector = Icons.Filled.ArrowBack,
                    contentDescription = null
                )
            }
        },
        title = { 
            Text(
                text = "${coin.rank}. ${coin.name} (${coin.symbol})",
                // 调整start的数值即可控制间距，数值越小间距越窄
                modifier = Modifier.padding(start = (-8).dp)
            ) 
        }
    )
}

方案2：自定义内容布局（灵活性最高） #

不使用TopAppBar自带的navigationIcon、title参数，直接在content槽位自定义整体布局，完全控制所有元素的间距：

@Composable
fun DetailsAppBar(coin: Coin, backAction: () -> Unit) {
    TopAppBar {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 4.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // 导航图标
            IconButton(onClick = backAction) {
                Icon(
                    imageVector = Icons.Filled.ArrowBack,
                    contentDescription = null
                )
            }
            // 自定义导航图标与标题的间距，可任意调整数值
            Spacer(modifier = Modifier.width(6.dp))
            // 标题
            Text(text = "${coin.rank}. ${coin.name} (${coin.symbol})")
        }
    }
}

方案3：Material 3版本专属参数调整 #

如果你的项目使用的是Material 3依赖库，可直接调整TopAppBar内置的titleContentPadding参数修改间距：

@Composable
fun DetailsAppBar(coin: Coin, backAction: () -> Unit) {
    TopAppBar(
        navigationIcon = {
            IconButton(onClick = backAction) {
                Icon(
                    imageVector = Icons.Filled.ArrowBack,
                    contentDescription = null
                )
            }
        },
        title = { Text(text = "${coin.rank}. ${coin.name} (${coin.symbol})") },
        // 调整start的数值即可控制标题与导航图标的间距
        titleContentPadding = PaddingValues(start = 8.dp)
    )
}

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