PS:这里我是新版本的AS创建的项目,默认使用的是Material3的依赖包,所以底部导航栏组件就是NavigationBar,如果是Material2的依赖包,则是叫BottomNavigation 效果如下图所示: 就是实现了两个底部菜单,然后可以进行页面的切换,代码如下所示: @OptIn(ExperimentalMaterial3Api::class)@Preview(showBackground = true)@Comp...
`BottomNavigation`中的content可以添加多个`BottomNavigationItem`,用来构建导航栏的样式,`BottomNavigationItem`中可以设置`icon`和`label`,选中颜色和未选中颜色等等一些常用的属性。可以给item设置点击事件`onClick`等。 ``` BottomNavigation(backgroundColor = Color.White, elevation = 6.dp) { for (i in labe...
这个办法是给每个屏幕添加标志位,来区分是否是导航的主页,之后再创建BottomNavigation时进行判断。贴一下: You need to specify which screens you want to show and which screens you dont want; Otherwise it will show to all the screens inside Scaffold's body (which you have bottomBar). The code belo...
navigation-compose 常用来配合 BottomNavBar 实现多Tab页的切换。如果我们直接使用 NavController#navigate 切换 Tab 页,会造成 NavBackStack 的无限增长,所以我们需要在页面切换后,从栈里及时移除不需要显示的页面,例如下面这样: val navController = rememberNavController() Scaffold( bottomBar = { BottomNavigation { ...
BottomBar设计 实现方式 因为使用ProvideWindowInsets包裹后底部导航栏顶到了底部,所以需要填充一个底部导航栏高度的Spacer。 代码 代码语言:javascript 复制 bottomBar={Column{Row(modifier=Modifier.fillMaxWidth().height(60.dp).background(statusbarColor),horizontalArrangement=Arrangement.SpaceAround,verticalAlignment...
然后可以根据 WindowSizeClass 的结果选择在 Compat 类型的屏幕展示 BottomBarLayout,而在 Medium 和 Expanded 类型的屏幕展示 NavigationRailLayout : 列表在不同屏幕尺寸导航 对于列表,在 Compact 类型的屏幕,也就是正常手机模式下,一般我们就只有一个列表,但是对于 E...
可以看出,Scaffold 真的为我们提供了好多组件,这里仅仅举了 TopAppBar 和 BottomNavigation 两个。但在实际中,我们用到的并不多,除非是需要快速上线,没有 UI 设计等等。所以我个人感觉,Scaffold 并不是我们应该掌握的重点,了解即可。 3. List 中布局的使用 ...
1、使用Scafoold作为页面的顶级,Scafoold中承载topbar和bottombar分别作为顶部导航栏和底部导航栏。 2、调用WindowCompat.setDecorFitsSystemWindows(window, false)方法让我们的布局超出状态栏和底部导航栏的位置 3、使用ProvideWindowInsets包裹布局,使我们可以获取到状态栏和底部导航栏的高度(不包裹无法获取状态栏和底部...
类似的,BottomAppBar提供了底部AppBar的实现 Material BottomNavigation BottomNavigation实现了NavigationBar效果,通过BottomNavigationItem往里添加Item @Composable fun BottomNavigationWithLabelComponent() { var selectedItem by remember { mutableStateOf(0) } ...
整体UI采用BottomNavigation组件作为底部导航栏,将预设的几个TAB页面Compose进来。同时提供TopAppBar作为TITLE栏展示页面标题和返回导航。 // Navigation.kt @Composable funNavigation{ ... Scaffold( topBar = { TopAppBar( ... ) }, bottomBar = {