首页 > 解决方案 > 无法在底部导航中垂直居中对齐项目

问题描述

我正在尝试在 Compose 的底部导航中垂直对齐中心的项目。我没有为修改器提供任何高度。出于某种原因,项目和图标抵制垂直居中对齐。这是我所拥有的,然后遵循我的代码:

在此处输入图像描述

@Composable
fun BottomBarUi(backStackEntry: State<NavBackStackEntry?>, onNavigate: (String) -> Unit) {
    BottomNavigation(modifier = Modifier){
        val currDest = backStackEntry.value?.destination
        for (screen in LocalInfo.current.bottomBarItems){

            BottomNavigationItem(
                selected = currDest?.hierarchy?.any{it.route == screen.route} == true,
                onClick = {
                          onNavigate(screen.route)
                },
                icon = { Icon(painterResource(screen.iconId), contentDescription = screen.route, modifier = Modifier.align(Alignment.CenterVertically))},
                label = { Utils.getRouteLabel(screen.route)},
                modifier = Modifier
                    .padding(1.dp)
                    .align(Alignment.CenterVertically)
                    .weight(1f)
            )
        }
    }

}

@Preview
@Composable
fun PreviewBottomBarUi() {
    BottomBarUi(backStackEntry = rememberNavController().currentBackStackEntryAsState(), onNavigate = {})
}

标签: kotlinandroid-jetpack-compose

解决方案


如果您的图标有填充并且您不想删除它们,您可以通过设置offset修饰符来偏移底部导航中的所有图标。同时删除你的align修饰符:

BottomNavigationItem(
     selected = currDest?.hierarchy?.any{it.route == screen.route} == true,
     onClick = {
                  onNavigate(screen.route)
     },
     icon = { Icon(painterResource(screen.iconId), contentDescription = screen.route, modifier = Modifier.align(Alignment.CenterVertically))},
     label = { Utils.getRouteLabel(screen.route)},
     modifier = Modifier
          .padding(1.dp)
          .offset(y = 10.dp)
          .weight(1f)
)

另一件事:不清楚为什么要设置标签属性,因为上面显示的图像不显示图像。


推荐阅读