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

【Jetpack】Navigation 导航组件 ② ( Navigation 核心要点说明 | 创建 Navigation Graph | 创建 NavHostFragment | 完整代码示例 )

组件 ; 最后 , Activity 获取 NavController 组件实现 Fragment 之间的跳转 ; 必须按照上述流程进行创建 : Fragment -> Navigation...Graph -> NavHostFragment -> NavController , 后面的组件依赖于前面的组件 , 否则无法实现 Navigation 导航 ; 2、导入 Navigation 依赖...使用 Navigation 组件 , 必须导入 Navigation 依赖 , 不同的开发语言导入不同的依赖 : 使用 Java 语言 开发 Navigation 导航 , 导入如下依赖 : dependencies...NavHostFragment 设置 Activity 的布局文件 , 一般是为 标签设置一个 android:name="androidx.navigation.fragment.NavHostFragment...NavHostFragment 组件 NavHostFragment 设置 Activity 的布局文件 , 一般是为 标签设置一个 android:name="androidx.navigation.fragment.NavHostFragment

39320

【Jetpack】Navigation 导航组件 ① ( Navigation 引入 | Navigation 特点 | Navigation 重要组件 | Navigation 使用流程 )

定义的 Fragment 页面 需要通过 NavHostFragment 进行展示 ; NavController 组件 : 该组件NavHostFragment 的管理对象 , 用于管理应用导航操作...: 使用 NavController 组件 切换 Fragment , 设置 要跳转的 定义 Navigation Graph 定义的 Fragment ; NavController 组件 会将...指定的 Fragment 显示到 NavHostFragment 组件 ; 四、Navigation 使用流程 ---- Navigation 使用流程 : 创建若干 Fragment 页面 创建 Navigation...Graph , 并指定要跳转的 destination 页面 创建 NavHostFragment 组件 执行 Fragment 页面跳转 , 并添加动画效果 使用 NavController 组件实现页面导航...需要设置 Activity , 具体是 Activity 的布局文件设置 NavHostFragment 容器组件 , 这是一个 UI 布局组件 ; 拖动 Container 下的 NavHostFragment

37740
您找到你想要的搜索结果了吗?
是的
没有找到

导航组件概览 | MAD Skills

该容器,我们可以看到 NavHostFragment 元素: ?...NavHostFragment使用导航组件时产生魔力的源泉,当用户 fragment 之间导航的时候,它是 fragment 目的地被替换进出的容器。...导航部件 我们已经层级结构查看了几个 UI 组件,以及它们彼此之间是如何关联的,接下来我想介绍一下几个重要部件,导航组件正是利用它们来目的地之间实现导航。...当用户应用中导航的时候,NavController 导航组件掌握着处理 NavHostFragment 替换进出目的地 fragment 的逻辑。 NavigationView ?...未来的文章和视频,针对如何同特定导航 API 进行交互,我会介绍更多的技术细节,比如导航到对话框目的地、使用 SafeArgs 以及处理深层链接。

1.6K30

VueJs如何使用Teleport组件

前言 DOM结构相对比较复杂,层级嵌套比较深的组件内,需要根据相对应的模块业务处理一些逻辑,该逻辑属于当前组件 但是从整个页面应用的视图上看,它在DOM应该被渲染在整个vue应用外部的其他地方,不能影响组件的结构...比较常见的应用场景:就是全屏的模态框,控制元素的位置,也是可以处理的,但是比较麻烦 在理想情况下,我们希望具体的组件,给元素绑定的事件,与具体要控制的DOM元素结构同一个组件,具体的位置处,保持一定的相关联性...而不用特意的把一些DOM结构给分离出去,然而,同一组件,触发模态框的按钮和模态框本身在同一组件 因为他们都与组件的开关状态有相关联,模态框与按钮一起渲染在应用DOM结构很深的地方,会导致模态框的...也就是说,如果 包含了一个组件,那么该组件始终和这个使用了 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。...这也意味着来自父组件的注入也会按预期工作,子组件将在 Vue Devtools 嵌套在父级组件下面,而不是放在实际内容移动到的地方 位置移动了,提现在结构模板上,但是数据逻辑依旧存在关联的 04 如何禁用

2.3K20

Vue ,子组件如何向父组件传递数据?

Vue ,子组件向父组件传递数据可以通过自定义事件来实现。 下面是一种常见的方法: 组件使用 $emit 方法触发一个自定义事件,并传递要传递给父组件的数据作为参数。...组件使用 v-on 或简写的 @ 语法监听子组件触发的自定义事件,并在相应的处理函数接收子组件传递的数据。..., methods: { handleCustomEvent(data) { this.receivedData = data; } } } 父组件通过使用...@custom-event 监听子组件触发的自定义事件,并在 handleCustomEvent 方法接收子组件传递的数据。...父组件将接收到的数据设置为 receivedData 属性,然后可以模板中进行显示或进一步处理。

38430

Vue 使用 $attrs 构建高级组件

$attrs 也可以被看作是一个安全网,它可以捕获任何我们没有组件声明的东西。...对象 不包含 class 属性 而 Vue3 的 attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute,这有利于我们方便使用这些属性。...然后可以像下面这样使用组件: 添加一些属性 目前我们的 Slier 组件还很简单,不太符合实际情况。...event.target.value)" class="slider__input" /> Value: {{ modelValue }} 组件...为了关闭这个功能,并控制哪些元素可接受这个额外的属性,我们可以使用一个名为 inheritAttrs 的标志,并将其设置为false。 经过这样的改变,我们的HTML就变得漂亮且干净了。

2.4K10

写一个MVVM快速开发框架:谈一谈“单Activity+多Fragment”模式

Navigation可以理解为以一个管理fragment的容器,容器各个fragment可以实现任意跳转, 基础使用: 我们需要在布局创建Fragment容器: <androidx.fragment.app.FragmentContainerView...我们可以使用它进行灵活的跳转,Google还出了一些Navigation Demo演示如何配合Toolbar和底部导航栏进行使用。 关于具体的用法这里不讲解了,很多文章都有,也可以参考官网。...Navigation 我们通常使用底部导航栏将app划分出不同的功能,这些都是单独的module,但是navigation怎么进行module间的跳转呢?...方式二: 因为app module本身是需要依赖各个子moduel的,我们可以navGraph直接使用子moduel的Fragment,主页面只需加入各个module的主Fragment就行了:...menu的id与navGraph设置成一样的啊哈哈哈哈 基本上ARouter+Navigation可以满足大部分的页面跳转需求,但还是有一些难点,就是不同moduel之间的navGraph怎么相互控制

1.5K40

1. Jetpack源码解析---看完你就知道Navigation是什么了?

基本使用 虽然之前的文章已经很详细的介绍了Navigation,但是这里也简单的叙述一下我项目中的具体使用: 2.1 Navigation+DrawerLayout+ToolBar 我们可以通过使用...大致意思就是NavHostFragment布局中提供了一个区域,用于进行包含导航 接下来我们看一下它的源码: public class NavHostFragment extends Fragment...没错,就是我们xml布局设置的那一个。...4.3 分析 4.3.1 NavHostFragment 我们Activity的布局里面设置NavHostFragment,同时设置了navGraph布局,经过上面的分析我们知道NavHostFragment...4.3.2 NavController NavContorller是整个导航组件的核心,通过它来加载xmlfragment节点转化成NavDestination,并保存在栈内,通过navigate()

2.5K30

【Jetpack】Navigation 导航组件 ⑤ ( NavigationUI 类使用 )

导航组件 , 属于 Android 系统的 Jetpack 工具包 ; 借助 NavigationUI 可以很方便的 创建和组织应用程序的导航界面 ; 如 : 构建复杂的导航结构,垂直或水平的主菜单..., 侧边栏 , 抽屉导航栏等 ; 开发者 可以 通过 NavigationUI 轻松地管理页面的转换和导航 ; NavigationUI 提供了一些静态方法来处理 顶部应用栏 / 抽屉式导航栏 / 底部导航...的界面导航 ; 本篇博客中介绍一种使用场景 : 使用 AppBar 中的菜单选项控制 Navigation 界面跳转 ; Activity , 使用 Navigation 组件 切换 Fragment...、Activity 导入 NavHostFragment 进入 Launcher 界面 MainActivity 的布局 , 删除布局的其它元素 ; 将 NavHostFragment 拖入到 布局...Activity 的布局文件 , 添加如下代码 , 不建议 Design 界面直接拖动 NavHostFragment , 生成的代码报错 , 直接拷贝下面的代码即可 ; 将 app:navGraph

65240

使用导航组件: 对话框目的地 | MAD Skills

概览 本系列的 上一篇文章 ,我大致介绍了导航组件以及如何使用导航图。 在这篇文章,我会介绍如何使用 API 来导航到对话框目的地 (dialog destination)。...大部分的导航发生在 Fragment 目的地之间, UI NavHostFragment 对象内部,fragment 会被替换出去。但其实导航到容器外的目的地包括对话框也是可行的。...我知道导航组件可以处理目的地,但是那只能替换掉单个 NavHostFragment 的 fragment,对吗? 对,也不对。...导航组件默认的行为确实是替换掉 NavHostFragment 的 fragment。但是导航组件同样可以处理 NavHostFragment 之外的对话框目的地。...注意: 点击返回按钮,同样会返回甜甜圈列表,因为导航组件已经自动为我们设置好了返回栈。 总结 通过这篇文章我们了解了如何使用内置的导航组件快速地创建一个新应用,并且学习了如何导航到对话框目的地。

1.4K30

【Android进阶必学】JetPack指路明灯—Navigation

NavHostFragment,有两个重要的参数,即mGraphId和mDefaultNavHost,保存着我们从xml解析出来的数据。...同时,onCreate的时候,创建了NavController,与mGraphId进行绑定。 使用路由 Fragment,可以通过NavController来进行路由,代码如下所示。...image.png 实际上,他是从Tag取出的,而这个Tag,则是NavHostFragment的onViewCreated创建的。...popUpTo="@id/A",如果popUpToInclusive=false,则跳转到C之后的路由栈为A—C,如果设置为true,则只剩下A路由栈,代码如下所示。...这里的动画,可以通过Design界面,直接选中action来设置,也可以直接在代码中指定。设置好后,代码如下所示。 image.png 动画文件比较简单,就是常见的补间动画。 <?

1.9K00

【错误记录】Navigation 导航组件报错 ( Activity xxActivity@3f does not have a NavController set on 2131xx )

一、报错信息 Android , 使用 Navigation 导航组件 , 运行应用时报错 , 报错信息如下 : FATAL EXCEPTION: main Process: kim.hsl.nav...获取到正确的 导航控制器(NavController)导致的 , 为了解决这个问题,需要在 Activity 获取正确的 NavController ; 想要在 Activity 获取正确的 NavController...Required: AppCompatActivity Found: MainActivity 然后 , 确保 Activity 的布局文件 , 设置了正确的 NavHostFragment 组件...; 这里有一个大坑 , 就是 Android Studio 自动生成的代码 , 布局文件的 Design 模式下 , 将 Container 下的 NavHostFragment 组件拖入到布局文件...Activity 布局文件 , 使用 fragment 标签 , 并设置 android:name=“androidx.navigation.fragment.NavHostFragment” 属性

37810

WordPress 教程: WordPress 如何设置定时作业

我们知道 Linux 服务器有个 Cron 的功能,可以用来设置定时执行的作业,但是并不是每个人都熟悉 Linux 系统,并且也不是所有的主机管理面板都有 Cron 栏目。...其实 WordPress 本身也有类似于 Cron 的功能,让我们可以直接在 WordPress 定义和执行定时作业,WordPress 把这个功能定义为:WP-Cron,比如 WordPress 本身的文章预发布功能就是基于...定义定义作业 WP-Cron 支持两种类型的定义作业: 单一的未来事件(比如设定某篇文章将来某个时间发布) 重复发生的事件,比如每天或每个星期等一段时间内重复发生的事件(比如定时清理无用的信息) 定义单一的未来事件...wp_next_scheduled 检测 wpjam_daily_function_hook 是否已经被加入到定时作业列表,如果没有,我们使用 wp_schedule_event 函数加入,这样可以确保作业只被定义一次... WPJAM Basic 定时作业管理后台加入: 这里非常好理解,就不再想讲,只是后通过界面添加的方式,暂时不支持参数,即 $args 参数。

2.2K20

深入浅出 NavigationUI | MAD Skills

这是第二个关于导航 (Navigation) 的 MAD Skills 系列,如果您想回顾过去发布的内容,请参考下面链接查看: 导航组件概览 导航到对话框 应用中导航使用 SafeArgs 使用深层链接导航...本文中,我们将为大家讲解另外一个用例,即类似操作栏 (Action Bar)、底部标签栏或者抽屉型导航栏之类的 UI 组件如何在应用实现导航功能。...我需要在应用增加一些页面,所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢?通过点击监听器手动触发导航动作吗? 不需要!无需任何监听器。...navController = navHostFragment.navController val toolbar = binding.toolbar 要在默认的操作栏 (Action Bar) 添加导航功能...setupWithNavController(navController) } 现在当我屏幕较宽的设备上运行应用时,可以看到抽屉式导航栏已经设置了 MenuItem,并且导航图中,MenuItem

3K30

ES 如何使用排序

Elasticsearch ,排序是一项重要的功能,它允许我们按照特定的字段或条件对搜索结果进行排序。通过合理使用排序,我们可以更方便地找到所需的信息。...最常见的方式是查询请求中使用`sort`参数。我们可以指定要排序的字段,并指定升序或降序排序。...例如,我们可以设置排序的权重,以确定不同字段排序的重要性。 实际应用,排序的使用需要考虑以下几个因素: 1. 用户需求:了解用户对搜索结果的期望排序方式,以便提供最相关和有用的结果。 2....8.使用倒排索引:利用倒排索引的特点,快速定位相关文档。 9.考虑字段的数据分布:对于分布不均匀的字段,可以采用一些特殊的处理方法。 10.合理设置索引参数:例如,调整分片数量、副本数量等。...总之,ES 的排序功能为我们提供了强大的工具,使我们能够根据各种需求对搜索结果进行灵活的排序。通过合理使用排序,我们可以提高搜索的效率和准确性,为用户提供更好的体验。

41310
领券