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

Question

问题

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

“旧”XML 属性是app:menuGravity="center" 根据本教程的。

我尝试过但没有成功的事情

我尝试将 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

正如示例中所建议的，将 navigationRail 的内容居中，您可以使用以下内容：

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(
            //....
        )
    }
}