如何在 Jetpack Compose 中将 NavigationRail 的内容居中（menuGravity 缺失）

Question

问题

可组合项 androidx.compose.material.NavigationRail 在某些文档中具有可选的“居中”对齐方式。我无法使用 Jetpack Compose 实现此目的。

“旧”XML 属性是 app:menuGravity="center" according to this tutorial。

我试过的东西都没有成功

我尝试将 NavigationRail（实际小部件的简单包装器）放入具有对齐设置的 Box 中：

Box(contentAlignment = Alignment.Center) {
    NavigationRail(
        selectedItem = selectedItem,
        onSelectItem = { selectedItem = it }
    )
}

并将其直接放入原始可组合项中：

NavigationRail(
    modifier = modifier.width(80.dp),
    backgroundColor = MaterialTheme.colors.surface
) {
   Box(contentAlignment = Alignment.Center) {
       for (item in NavigationItem.values()) {
      NavigationRailItem(
          selected = selectedItem == item,
          onClick = { onSelectItem.invoke(item) },
          icon = { Icon(item.icon, item.title) },
          alwaysShowLabel = true,
          selectedContentColor = MaterialTheme.colors.primaryVariant,
          unselectedContentColor = MaterialTheme.colors.primary,
          label = { Text(item.title, modifier = Modifier.padding(top = 8.dp)) }
      )
       }
   }
}

截图（取自与链接教程相同的站点）

Answer 1

正如 example 中所建议的那样，要使导航栏的内容居中，您可以使用类似的东西：

NavigationRail {
    Spacer(Modifier.weight(1f))
    items.forEachIndexed { index, item ->
        NavigationRailItem(
            //....
        )
    }
    Spacer(Modifier.weight(1f))
}

要实现底部对齐，只需使用 Spacer:

NavigationRail {
    Spacer(Modifier.weight(1f))
    items.forEachIndexed { index, item ->
        NavigationRailItem(
            //....
        )
    }
}

如何在 Jetpack Compose 中将 NavigationRail 的内容居中（menuGravity 缺失）

How to center a NavigationRail's content in Jetpack Compose (menuGravity missing)

android

kotlin

material-design

android-jetpack-compose