如何减少jetpack中导航图标和标题之间的水平空间组成“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 = {})
}

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

这是我要减少的空间：

输入

TopAppBar

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

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

  

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)
                        ...... ,
                )
            }
        }
    }
}

Answer 3

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

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