首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jetpack Compose -如果具有嵌套导航,则不会选中底部导航图标

Jetpack Compose是一种用于构建Android应用程序用户界面的现代工具包。它是Google推出的一种声明式UI框架,旨在简化和加速Android应用程序的开发过程。Jetpack Compose使用Kotlin编程语言,并通过使用函数式编程的概念来构建用户界面。

对于具有嵌套导航的情况,Jetpack Compose不会自动选中底部导航图标。这意味着在嵌套导航中,当用户导航到不同的目标页面时,底部导航图标不会自动更新为相应的选中状态。

要实现具有嵌套导航的底部导航图标选中功能,可以使用Jetpack Compose中的rememberNavController函数来创建一个导航控制器,并将其与底部导航栏中的每个图标关联起来。然后,可以使用NavHost组件将每个目标页面与相应的导航图标关联起来。

以下是一个示例代码,展示了如何在Jetpack Compose中实现具有嵌套导航的底部导航图标选中功能:

代码语言:txt
复制
@Composable
fun MyBottomNavigation() {
    val navController = rememberNavController()

    Scaffold(
        bottomBar = {
            BottomNavigation {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentRoute = navBackStackEntry?.destination?.route

                BottomNavigationItem(
                    icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
                    label = { Text("Home") },
                    selected = currentRoute == "home",
                    onClick = {
                        navController.navigate("home") {
                            popUpTo(navController.graph.startDestinationId)
                            launchSingleTop = true
                        }
                    }
                )

                BottomNavigationItem(
                    icon = { Icon(Icons.Default.Settings, contentDescription = "Settings") },
                    label = { Text("Settings") },
                    selected = currentRoute == "settings",
                    onClick = {
                        navController.navigate("settings") {
                            popUpTo(navController.graph.startDestinationId)
                            launchSingleTop = true
                        }
                    }
                )
            }
        }
    ) { innerPadding ->
        NavHost(navController, startDestination = "home") {
            composable("home") { HomeScreen() }
            composable("settings") { SettingsScreen() }
        }
    }
}

在上述示例中,MyBottomNavigation函数定义了一个底部导航栏,并使用rememberNavController函数创建了一个导航控制器。每个底部导航图标都与相应的目标页面关联,并通过selected属性来确定是否选中该图标。当用户点击底部导航图标时,导航控制器会相应地导航到相应的目标页面。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

安卓软件开发:使用Jetpack Compose实现高级NimNavBottomApp

这个Demo,我实现了一个常见的底部导航栏App,包括多个页面切换、选中状态的高亮显示、徽章通知的显示等功能。...二、项目开发 2.1 介绍Badges UI组件 底部导航栏的每个菜单项展示图标和标签,还可以显示通知徽章。徽章可以提醒用户有未读的消息or待处理的任务。...通过 currentBackStackEntryAsState() 监听导航堆栈的变化,确保底部导航栏的选中状态始终与当前显示的页面保持同步。...深刻体会到 Jetpack Compose 有未来。 五、总结 通过这个项目,展示了如何使用 Jetpack Compose 和 Material 3 实现一个带有高级功能的底部导航应用。...无论是徽章通知的处理,还是底部导航栏与页面内容的同步显示,Jetpack Compose 都提供了简洁高效的解决方案。 有任何问题欢迎提问,感谢大家阅读 )

246101

深度解析 Jetpack Compose 布局

这是 View 系统中存在的问题,嵌套结构执行多遍测量过程可能让叶子视图上的测量次数翻倍,Compose 的设计能够防止发生这种情况。...实际上,如果您对某个项目进行两次测量,Compose 抛出异常: △ 重复测量某个项目时 Compose 抛出异常 布局动画示例 由于具备更强的性能保证,Compose 提供了新的可能性,例如为布局添加动画...以 Jetsnack 应用中的自定义底部导航为例,在该设计中,如果某项目被选中,则显示标签;如果未被选中,则只显示图标。而且,设计还需要让项目的尺寸和位置根据当前选择状态执行动画。...最终便实现了期望的效果: △ 图标底部与文本基线完美对齐 由于对齐功能穿过父节点,因此,处理嵌套对齐时,只需设置父节点的对齐线,它会从子节点获取相应的值。...如需了解更多,请查阅以下列出的资源: Jetpack Compose 使用入门文档 Jetpack Compose 学习路线图 Jetpack Compose 相关示例

2.1K30
  • 为任意屏幕尺寸构建 Android 界面

    如果您更喜欢通过视频了解此内容,请 点击此处 查看。...在 Layout Validation 右上角可以发现一个警告图标,单击此图标可以打开警告窗口,点击每个警告显示哪些设备会受到影响。...我们先来进行第一项优化,使用 NavRail 而非底部应用栏,首先我们要考虑的是导航模型,所幸我们不会更改很多具体的视图,仅仅只会更改导航方式,因为 NavRail 一直存在于整个视图体系中,可以通过它导航到任何其他视图...Jetpack Compose Jetpack Compose 在 2021 年 7 月发布了 1.0 版本后,在 Android 开发者社区产生了巨大反响,成千上万的应用已经在生产环境中使用了 Compose...Jetpack Compose 本身是一种声明式的界面工具包,通过它您可以根据页面状态进行描述,Compose 自行进行所有必要的更新。

    4.2K20

    Row本身是不支持滚动,如何实现滚动

    似乎不支持一个水平滚动嵌套垂直滚动(或垂直滚动中嵌套水平滚动),所以相应布局需要合理设计 此外,提及下,如果想使用像ListView或RecyclerView那样的列表组件,在Compose中可以使用LazyRow...敬请期待 verticalAlignmentment 取值有三个值: Alignment.CenterVertically 居中 Alignment.Top 靠顶部 Alignment.Bottom 靠底部...与上面一样,布局高度如果是自适应的,则不会有效果 复制Row(verticalAlignment = Alignment.CenterVertically) { Box( Modifier...= null, elevation: Dp = 1.dp, content: @Composable () -> Unit ) shape 形状,使用详见Jetpack Compose学习...border 边框,使用详见Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 elevation

    1.8K30

    Android Compose 新闻App(六)导航动画、WebView、浮动按钮、底部导航

    Android Compose 新闻App(六)导航动画、WebView、浮动按钮、底部导航 前言 正文 一、导航动画 ① 添加依赖 ② 使用 二、WebView使用 ① 导航传递URL参数 ② 配置WebView...三、FloatingActionButton使用 ① 修改默认显示位置 四、App主页面构建 ① 密封类 ② 构建底部导航Item ③ 装载底部导航Item ④ 显示导航 五、源码 前言   在上篇文章中完成了页面的导航...着重讲一下WebView的使用,Compose中目前并没有WebView的直接使用,因为我们的WebView还是Android的原生WebView,没有经过Compose的封装,而如果要在Compose...:material-icons-extended:$compose_version" Sync Now,这是一个图标库,后面我们将用到它。...下面构建一个密封类,在utils包下新建一个BottomItemScreen,代码如下: /** * 定义路线名称,底部标题和图标 */ sealed class BottomItemScreen(

    4.6K20

    安卓软件开发:使用Jetpack Compose实现DrawerMenuApp

    在这篇文章里,我分享一个用 Jetpack Compose、Material3和 Kotlin语言开发NimDrawaerMenuApp的案例。无论你有没有开发经验,相信这篇文章对你非常有所帮助。...通过 Jetpack Compose,安卓开发已经从传统的 XML 布局转向了声明式 UI 方式,简化了很多工作。...这个Demo演示利用 Jetpack Compose 和 Material 3 实现一个带有 Drawer 菜单的应用,帮助用户理解工作机制,通过此应用进行页面切换。...在 Jetpack Compose 中,使用 ModalNavigationDrawer 组件构建 Drawer 菜单,根据用户操作动态显示或隐藏菜单。...五、总结 通过这个DrawerMenuAppDemo,展示了如何在Jetpack Compose M3中实现一个带有抽屉菜单的安卓应用,添加更多的菜单项以及对应的页面功能。

    42150

    Android实战经验分享之用Kotlin中的Jetpack Compose构建声明式UI

    心里种花,人生才不会荒芜,如果你也想一起成长,请点个关注吧。 Kotlin中的Jetpack Compose是用于构建Android用户界面的声明式UI工具包。...下面我们来看看关于Jetpack Compose的核心概念、主题和样式、导航和预览功能: 核心概念 1、 声明式UI: Jetpack Compose采用了声明式编程范式,允许开发者描述UI的外观和状态...2、 Composable函数: Compose UI是由一系列@Composable注解的Kotlin函数构成的。这些函数描述UI的组成部分,例如按钮、文本、图标等。...Jetpack Compose有自己的导航组件,用于在不同屏幕之间导航。...如果你是Android开发者或者希望学习现代UI开发,掌握Jetpack Compose将会大大提升你的开发体验和效率。

    17210

    动画实现更简单,Navigation Compose 帮您忙

    Jetpack Compose 将动画实现的门槛降低了——从 "如果有时间再慢慢打磨" 到 "动画实现很简单,没有理由不试试看了"。...因此,如果您使用了任何一个基于这些实验性 API 构建的库,当您更新了您使用的 Compose 版本但没有同时更新这些库的版本时,这些库可能直接崩溃并构建失败。...(如果您使用了早期发布的 Compose 版本,您就会知道这种痛苦。)...如果您只想修改某个子图的默认值 (例如,您的登录子图中的页面总是使用横向滑动动画),您也可以在嵌套图级别设置动画: navigation( startDestination = "ask_username...继续前进 平衡稳定性以及我们作为 Jetpack 库对自己提出的向前和向后兼容性要求,并具有快速交付功能的能力,这并不像我们想象的那么简单。

    1.9K20

    【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

    底部导航选中状态切换代码示例 五、BottomNavigationBar 底部导航栏切换选项卡界面 六、 相关资源 一、BottomNavigationBar 组件 ---- BottomNavigationBar..., 标识当前选中的索引值 ; /// 当前被选中底部导航栏索引 int _currentSelectedIndex = 0; 将 BottomNavigationBar 组件的 currentIndex..., 之后 BottomNavigationBar 组件自动更新当前选中的选项卡 ; // 底部导航栏 BottomNavigationBar 设置 // items...组件自动更新当前选中的选项卡 setState(() { // 改变 int _currentSelectedIndex 变量的状态...---- BottomNavigationBar 底部导航栏的 onTap 回调方法中 , 设置当前选中的选项卡索引 , 根据该索引值修改 Scaffold 组件的 body 对应组件 , 如果选项卡索引为

    2.3K00

    掌握Flutter底部导航栏:畅游导航之旅

    下面是一个简单的示例,演示了如何使用BottomNavigationBar创建一个具有三个导航项的底部导航栏: class MyBottomNavigationBar extends StatefulWidget...Flutter提供了丰富的选项,使开发者可以轻松自定义底部导航栏的外观,包括选中项的颜色和图标、背景颜色和形状、导航栏的高度以及图标的大小等。在本节中,我们将介绍如何实现底部导航栏的自定义外观。...如果用户已登录,则显示“Home”和“Search”导航项;如果用户未登录,则显示“Login”导航项。...总结 底部导航栏是移动应用界面设计中常见且重要的组件之一,在Flutter中实现底部导航栏不仅简单易行,而且具有丰富的功能和灵活的定制性。...接着,我们讨论了如何自定义底部导航栏的外观,包括更改选中项的颜色和图标、自定义背景颜色和形状、以及调整导航栏的高度和图标大小等。

    36110

    谷歌大佬强势分享《Jetpack Compose 权威指南》,带你参透声明式UI的终极奥义!

    先抛出我的结论:如果你想运用到实际的生产环境中,Flutter 肯定是更好的选择,因为更多的人帮你踩过了坑。...如果你想 Kotlin 一把梭,只是学习尝鲜,结合 Jetpack Compose 可以很好的作为你的技术储备。...Jetpack Compose应用1 开始前的准备 创建DEMO 遇到的问题 2. Jetpack Compose应用2 3....用Jetpack Compose写一个玩安卓App 准备工作 引入依赖 新建 Activity 创建 Compose PlayTheme 画页面 底部导航栏 管理状态 添加页面 5....用Compose快速打造一个“电影App” 成品 实现方案 实战 不足 …… 如果想要全方位系统学习了解Compose,那么这份《Jetpack Compose 权威指南》你一定不要错过。

    4.4K30

    【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

    2、四个切换页面 3、应用启动主界面 4、运行效果 五、相关资源 一、BottomNavigationBar 底部导航栏 ---- 在 Scaffold 的 bottomNavigationBar 属性设置底部导航栏...; 设置当前索引 : BottomNavigationBar的 currentIndex 属性设置当前底部导航栏的选中索引 , 为其设置一个变量 , 改变该变量值后 , 通过 setState 方法更新...方法 实现相应的界面跳转 ; BottomNavigationBar( /// 当前选中导航索引 currentIndex: _currentIndex, /// 底部导航栏的点击方法...主动设置选中状态 : 滑动 PageView 界面 , 回调 PageView 中的 onPageChanged 方法 , 在此处调用 setState 方法 , 在该方法中设置 _currentIndex...的值 , 进而更新 BottomNavigationBar 底部导航栏的选中状态 ; PageView( /// 控制跳转翻页的控制器 controller: _pageController,

    4.4K20
    领券