如何在Jetpack Compose的TopAppBar中减少导航图标和标题之间的水平间距？

Question

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

这是我的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 = {})
}

这是我的compose函数的可视预览： 这是我想要减少的空间： 在TopAppBar的compose函数代码中，我找不到任何参数允许我这样做。

- Pierre Vieira

Answer 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})",
                modifier = Modifier.offset(x = (-16).dp)
            )
        }
    )
}

  

- Ahmet Burak Ilhan

---

这符合我的需求，效果更好。谢谢伙计。 - Naveen Rao

Answer 2

你说得对。使用你当前所用的 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)
                        ...... ,
                )
            }
        }
    }
}

- Henry

---

如果您还需要使用操作，这种方法就行不通了。 - Naveen Rao

Answer 3

你必须为标题中的文本设置偏移量。

title = { Text(text = "MyApp", color = Color.White, modifier = Modifier.offset(x = (-13).dp)) }

- Karimi