首页
学习
活动
专区
工具
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的更多信息和示例,请参考Jetpack Compose官方文档

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

相关·内容

深度解析 Jetpack Compose 布局

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

2K30

为任意屏幕尺寸构建 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.4K20

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将会大大提升你的开发体验和效率。

8710

动画实现更简单,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中实现底部导航栏不仅简单易行,而且具有丰富的功能和灵活的定制性。...接着,我们讨论了如何自定义底部导航栏的外观,包括更改选中项的颜色和图标、自定义背景颜色和形状、以及调整导航栏的高度和图标大小等。

26010

谷歌大佬强势分享《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.1K30

微信小程序tabbar设置样式在哪里改

微信小程序tabbar通俗点说就是底部导航,我们一般配置相关的菜单,方便读者快速导航。...tabbar是在项目根目录中的配置文件 app.json 中进行设置;如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现...导航配置属性 color 未选择时 底部导航文字的颜色 selectedColor 选择时 底部导航文字的颜色 borderStyle 底部导航边框的颜色(注意:tabbar上边框的颜色,...仅支持 black/white,默认值是black) list 导航配置数组 selectedIconPath 选中图标路径 iconPath 未选中图标路径 pagePath 页面访问地址...text 导航图标下方文字

11K42

【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.2K20

探索 Flutter 中的 NavigationRail:使用详解

属性设置选中项的图标主题,以及 selectedLabelTextStyle 属性设置选中项的标签文本样式。...label: Text('Home'), // 自定义标签文本 // 其他属性... ) 通过使用上述自定义选项,您可以轻松地根据应用程序的需求和设计风格定制 NavigationRail 的外观,并提供具有个性化标签和图标导航栏...通常,leading 用于在导航栏的顶部添加元素,而 trailing 则用于在底部添加元素。...NavigationRail( leading: Icon(Icons.menu), // 在导航栏顶部添加图标 trailing: Icon(Icons.search), // 在导航底部添加图标...A: 当导航项超出屏幕宽度时,NavigationRail 自动在侧边添加一个滚动条,用户可以通过滚动来查看所有导航项。 Q: 我应该何时使用 NavigationRail?

40210

【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

如果你看到了一个空白的内容,你很有可能是忘记添加选中项了。     selectedIcon Image.propTypes.source         当标记被选中时,自定义的图标。...请注意如果你正在使用它们,标题和选中图标将被系统图标覆盖。     title字符串         出现在图标下的文本。当定义了系统图标时,它会被忽略。...如果工具栏具有唯一子级,它将显示在标题和操作之间。...此属性需要一个对象数组,其中每个对象具有以下键:     • title :必要的,这个操作的标题     • icon :这个操作的图标,例如:require('image!...navIcon Image.propTypes.source         设置导航图标。     onActionSelected function         被选中时调用回调函数。

53140

react-navigation,刷新你的导航一、属性介绍二、案例

(2)TabNavigator:类似底部导航栏,用来在同一屏幕下切换不同界面 (3)DrawerNavigator:侧滑菜单导航栏,用于轻松设置带抽屉导航的屏幕 ?...title:标题,如果设置了该属性,导航栏和标签栏的title就会变成一样。...backBehavior - 后退按钮是否切换到初始路由? 如果是,设置为initialRoute,否则为none。...当然导航有自身的返回按钮。以下代码是ChatScreen组件的代码,当用户组件Text也返回到上一个界面。...传递参数 在ChatScreen页面中,如果直接写死标题则不利于代码的可维护性。所以我们可以在导航的时候传递参数。首先编辑一下HomeScreen组件,传递自定义的属性user参数到路由中去。

19.6K90

Flutter Widgets 之 BottomNavigationBar

Flutter版本:1.12.13+hotfix.5 Dart版本:2.7.0 BottomNavigationBar 和 BottomNavigationBarItem配合Scaffold控件使用可以实现底部导航效果...,类似于微信底部导航效果,下面是一个简单的底部导航案例: Scaffold( bottomNavigationBar: BottomNavigationBar( items...我们还可以设置其背景颜色(backgroundColor)、图标大小(iconSize)、选中和未选中图标、字体的颜色,大小等。...如果导航图标是自己设计的图标,这时仅仅通过BottomNavigationBar是无法实现我们想要的效果的,比如微信的导航的效果,虽然选中和未选中也是颜色的区别,但图标不是Icons自带的图标,想要实现切换...2个图标需要BottomNavigationBarItem控件的支持,其中的icon和activeIcon分别代表未选中选中

77130

Android Navigation + Fragment 制作APP主页面导航(步骤 + 源码)

运行效果图 Navigation + Fragment制作APP主页面 ---- 前言   我相信你肯定见过这样的App主页面,底部或者顶部有多个按钮,点击之后会切换当前的页面,滑动当前页面也切换底部按钮...添加依赖 Navigation 是JetPack中的组件,感兴趣可以去查看Google JetPack官方文档。而如果你想单独查看的Navigation 内容,可以点击Navigation 文档。...,这样就把刚才的item都添加进去了 现在你通过预览已经可以看到这个底部导航栏了,不是吗?...可以看到,底部导航栏已经出来了,而且还可以点击,点击之后还有动画效果,并且图标和文字的颜色还有变化,因为实际上我只是放了灰色图标而已。...底部导航栏控制Fragment切换 在上面已经添加了底部导航栏,但是这个导航栏还没有和NavHost绑定起来,所以自然就无法在切换底部导航的同时,改变NavHost中的Fragment。

9.5K42
领券