如何减少 Jetpack 中导航图标和标题之间的水平 space 组成`TopAppBar`？

Question

我正在 Jetpack Compose 中制作应用栏，但导航图标和标题之间存在间距问题。

这是我的撰写功能：

@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})") }
    )
}

这是我的预览功能：

@Composable
@Preview
fun DetailsAppBarPreview() {
    val bitcoin = Coin(
        id = "",
        isActive = true,
        name = "Bitcoin",
        rank = 1,
        symbol = "BTC"
    )
    DetailsAppBar(coin = bitcoin, backAction = {})
}

这是我的撰写功能的视觉预览：

这是我要减少的space：

正在输入 TopAppBar 撰写函数的代码，我看不到任何允许我执行此操作的参数。

Answer 1

你是对的。对于您使用的 TopAppBar 变体，这是不可能的。这是因为 NavigationIcon 的宽度设置为默认值 (72.dp - 4.dp)。您可以检查 TopAppBar 的实现并查看它使用以下内容：

private val AppBarHorizontalPadding = 4.dp

// Start inset for the title when there is a navigation icon provided
private val TitleIconModifier = Modifier.fillMaxHeight()
    .width(72.dp - AppBarHorizontalPadding)

您可以使用 TopAppBar 的另一个变体，它可以让您更好地控制标题和图标的放置。它可能是这样的：

@Composable
fun Toolbar(
    @StringRes title: Int,
    onNavigationUp: (() -> Unit)? = null,
) {
    TopAppBar(backgroundColor = MaterialTheme.colors.primary) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(56.dp)
        ) {
            // Title
            Text(...)
            
            // Navigation Icon
            if (onNavigationUp != null) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_back),
                    contentDescription = stringResource(
                        id = R.string.back
                    ),
                    tint = MaterialTheme.colors.onPrimary,
                    modifier = Modifier
                        .clip(MaterialTheme.shapes.small)
                        .clickable { onNavigationUp() }
                        .padding(16.dp)
                        ...... ,
                )
            }
        }
    }
}

如何减少 Jetpack 中导航图标和标题之间的水平 space 组成`TopAppBar`？

How to reduce horizontal space between navigation icon and title in a jetpack compose `TopAppBar`?

android

android-appbarlayout

android-jetpack-compose