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

使用导航组件: 条件导航 | MAD Skills

这是第二个关于导航 (Navigation) 的 MAD Skills 系列,本文是导航组件系列的第二篇文章,如果您想回顾过去发布的内容,请参考下面链接查看: 导航组件概览 导航到对话框 在应用中导航使用...概述 条件导航 (Conditional navigation) 指的是在为应用设计导航,您可能需要基于条件逻辑将用户转到某一个目的地而非另一个。...在 上一篇文章 中,我使用 NavigationUI 实现了应用的底部导航,并增加了 SelectionFragment 来启用或禁用咖啡记录功能。...我将使用 Datastore API 来保存用户的选择,并据此决定是否在底部导航中展示 coffeeList 目的地。...在应用中使用条件导航的准备工作 这是自上一篇文章以来我所做 修改 的快速回顾: 首先,我添加了 UserPreferencesRepository,它使用 DataStore API 来保存用户的选择;

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

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

的重要工具 , 可以极大地提高开发效率 ; 一、NavigationUI 类简介 NavigationUI 是 Google 官方提供的 用于管理 Navigation 导航组件 , 属于 Android...可以 通过 NavigationUI 轻松地管理页面的转换和导航 ; NavigationUI 提供了一些静态方法来处理 顶部应用栏 / 抽屉式导航栏 / 底部导航栏中 的界面导航 ; 本篇博客中介绍一种使用场景...: 使用 AppBar 中的菜单选项控制 Navigation 界面跳转 ; 在 Activity 中 , 使用 Navigation 组件 切换 Fragment 界面 , 除了进行界面切换之外..., 会自动生成对应的 布局文件 : 注意 : 该操作比较坑 , 生成 Fragment , 会自动添加 Kotlin 语言插件的 Gradle 依赖 , 必要可以删除该依赖 ; 自动生成的依赖没有配置..., navController) 代码的含义是 : 优先使用 NavigationUI 进行导航 , 如果跳转失败 , 再使用传统的方式执行默认动作 , 代码为 super.onOptionsItemSelected

63540

错误记录】Navigation 导航组件报错 ( failed to add navigation dependency )

navigation dependency " ; 点击该界面 , 会弹出如下对话框 , 点击 OK , 会自动向 build.gradle 构建脚本中添加依赖 ; 二、问题分析 ---- 使用...Android Navigation 组件遇到 “failed to add navigation dependency” 错误,可能原因有以下几种情况: ① 尚未正确添加依赖项。...navigation-fragment:2.2.2' implementation 'androidx.navigation:navigation-ui:2.2.2' } ② 未正确配置 Navigation 组件...三、解决方案 ---- 添加 Navigation 导航组件依赖 : implementation 'androidx.navigation:navigation-fragment-ktx:2.4.1...androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0' } 添加完依赖后 , 重新 Build 一下应用 , Navigation 功能正常使用

38120

【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画组件 | 动画执行 )

、相关资源 AnimatedBuilder 动画使用流程 : ① 创建动画控制器 ② 创建动画 ③ 创建动画作用的组件 ④ 创建 AnimatedBuilder 关联动画组件 ⑤ 执行动画 ◯、AnimatedBuilder...| 动画运行 ) 中 , 使用了 AnimatedWidget 组件实现动画 , 省略了手动添加监听器 , 并在监听器中手动调用 setState 更新动画的操作 ; 使用 AnimatedWidget...StatelessWidget , 该组件与 Animation 动画对象各自都是独立的 , 使用 AnimatedBuilder 耦合 动画组件 ; 代码示例 : /// 3 ....context) { return // 动画的主体组件 // 布局组件使用动画的值 , 以达到动画效果 Container( decoration:...context) { return // 动画的主体组件 // 布局组件使用动画的值 , 以达到动画效果 Container( decoration:

1.4K10

在应用中导航使用 SafeArgs | MAD Skills

今天为大家发布本系列文章中的第三篇: 在应用中导航使用 SafeArgs。...如果您看到这篇文章的时候较晚,那么应该会有一个更新的版本供您使用。只要和您所使用导航组件 API 的其它模块的版本一致就可以了。...另外需要注意的是,应用现在使用该对话框添加新的元素 (我在上一篇文章 使用导航组件: 对话框目的地 | MAD Skills 中已经介绍),同时也使用该对话框编辑已有元素。...请继续关注我们后续的关于导航组件的内容,接下来我们会介绍如何使用 Deep Link。...更多信息 更多关于导航组件的详情,请查看 导航组件使用入门文档 DonutTracker 应用的完整代码,请查看 Github 示例 更多现代 Android 开发技巧 (MAD Skills) 系列内容

1.5K20

【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )

动画使用流程 : ① 创建 AnimatedWidget 动画组件 ② 创建动画控制器 ③ 创建动画动画运行 ◯、AnimatedWidget 组件引入 ---- 在上一篇博客 【Flutter...】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 ) 中 , 使用动画 , 需要给动画添加值监听器...; 使用 AnimatedWidget 组件 , 可以直接实现上述操作 ; AnimatedWidget 组件 可以极大简化 Flutter 中动画使用 , 不使用 AnimatedWidget 的话...动画对象 , 可以自动计算出动画值 , 并自动刷新封装在该 AnimatedWidget 动画组件中的布局组件 ; 创建 AnimatedWidget 动画组件 , 传入 Animation 对象...; " AnimatedWidget 动画组件 " 代码示例 : 在组件刷新 , 每次刷新都要调用该组件的 build 方法 , 这里使用 Text 组件显示动画的状态和值 , 并绘制动画作用的组件

1.8K10

【Jetpack】Navigation 导航组件 ③ ( 为 Navigation Graph 页面跳转 action 添加跳转动画 )

, 其中 enterAnim 是进入动画 , exitAnim 是退出动画 , 这两个动画选项后面都有一个 " Pick a Resource " 按钮 ; 3、为 action 跳转设置 enterAnim...进入动画 点击 enterAnim 进入动画 后的 " Pick a Resource " 按钮 , 可以在下面的 " Pick a Resource " 对话框中选择对应的动画 ; enterAnim...进入动画 , 可以选择 nav_default_enter_anim 动画 ; 设置完毕后 , action_fragmentA_to_fragmentB 跳转 action 增加了一个属性 app...点击 exitAnim 退出动画 后的 " Pick a Resource " 按钮 , 可以在下面的 " Pick a Resource " 对话框中选择对应的动画 , 设置 系统自带的 默认退出动画...nav_default_enter_anim" app:exitAnim="@anim/nav_default_exit_anim" /> 上述设置了 两个属性后 , 在跳转

19620

React Native导航Navigator组件基本使用方法

最近在学React Native,了解了一个原本iOS中非常重要的导航控件的使用方法。...不过在React Nativa中,这个导航控件是不会自带顶部的导航栏的,也不会自动生成返回按钮之类的,只是提供了类似的导航功能,且原理也是出栈入栈的方式,也就是说同样是有着push和pop方法的。...这里不讲React Native的基础了,直接讲一讲Navigator这个组件的基本使用方法。...对于一个导航组件,最基本的就是下面几个点: 进入下一个界面 返回上一个界面 传递数据给下一个界面 返回数据给上一个界面 我们一个一个来看。...首先要使用Navigator组件,按照惯例是要import它的,这个别忘了。

1.5K20

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

一、Navigation 引入 Android 开发中 , 最常用的 UI 架构 就是 使用一个 Activity 嵌套多个 Fragment , 这就需要 对 Fragment 进行管理 ; 在传统的...切换动画设置运行 , Fragment 与 Fragment / Activity 之间的数据传递 , 应用 App Bar 管理 等操作 ; 上述操作都是 使用纯代码方式进行实现 , 在页面和 App...; 如果要 为 Fragment 跳转设置动画 , 可以直接在 Navigation 图形化界面中选中某个跳转 , 然后直接在 布局文件的 Design 图形化界面中 , 设置跳转的动画 ; 通过 safe...args 可以实现 Fragment 页面之间的参数安全传递 , 传统方式是使用 Intent 进行数据传递 ; 通过该 Design 模式下的 Navigation 管理 , 可以对 菜单 , 底部导航栏...组件 执行 Fragment 页面跳转 , 并添加动画效果 使用 NavController 组件实现页面导航 使用 Safe Args 插件安全传递数据 创建 Navigation Graph 组件有一个前提

36140

ElementUI使用Upload组件传递额外参数

前言 这学期写过一个项目,用到了Element中的Upload组件,项目的需求是除了上传文件到后端,还需要传递额外的参数,在这里耗了一点间,在网上找了很多解决办法,但都不是我需要的,这里记录一下。...的官网说明能不能再详细一点) 说明: 前端:Vue 后端:Flask 这里我需要传递的参数是存储在Session中的username 正文 前端 根据官网的说明,如果要用Upload传递除文件之外的其他参数,需要使用到...'username': sessionStorage.getItem('username'), } } }, .... } Upload组件使用如下..." type="success" @click="submitUpload()">上传至服务器 后端 flask接收data传递的参数,...直接使用request.form[]语法接收对象中定义的变量,而非接收对象本身 # 文件上传 @file_bp.route('/fileupload', methods=['GET','POST'])

3.5K20

Android架构组件Room的使用详解

Room其实就是一个orm,抽象了SQLite的使用,但是它作为Android的亲儿子orm,并且原生支持LiveData和Rxjava嵌套使用,学习一下还是不错的。...Room有3个主要组件 Database :数据库 Entity : 代表数据库一个表结构 Dao : 包含访问数据库的方法 简单使用 添加Google Maven仓库 allprojects {...@Action int onDelete() default NO_ACTION; //当父类实体(关联的外键表)更新执行的操作 @Action int onUpdate() default...,下面会单独拿出来讲 .fallbackToDestructiveMigration()//迁移数据库如果发生错误,将会重新创建数据库,而不是发生崩溃 ....} } } } 您应该将导出的JSON文件(表示数据库的模式历史记录)存储在您的版本控制系统中,因为它允许为测试目的创建您的数据库的旧版本 总结 以上所述是小编给大家介绍的Android架构组件

2.2K10

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

概览 在本系列的 上一篇文章 中,我大致介绍了导航组件以及如何使用导航图。 在这篇文章中,我会介绍如何使用 API 来导航到对话框目的地 (dialog destination)。...id 将导航目的地改变为对话框,这里的 id 正是在导航图中创建目的地所生成的。...其次,我们从 FAB 导航 (不需要传递参数给 Directions 对象) 调用 navigate() 方法和从甜甜圈列表中任一列表项导航 (需要传递 donut.id) 不太一样。...注意: 点击返回按钮,同样会返回甜甜圈列表,因为导航组件已经自动为我们设置好了返回栈。 总结 通过这篇文章我们了解了如何使用内置的导航组件快速地创建一个新应用,并且学习了如何导航到对话框目的地。...更多信息 更多关于导航组件的详情,请查看 导航组件使用入门文档 DonutTracker 应用的完整代码,请查看 Github 示例 更多 MAD Skills 系列内容,请查看 Android Developers

1.4K30

使用PyTorch,最常见的4个错误

导读 这4个错误,我敢说大部分人都犯过,希望能给大家一点提醒。 最常见的神经网络错误:1)你没有首先尝试过拟合单个batch。2)你忘了为网络设置train/eval模式。...直到我们完成,StopIteration被触发。在这个循环中,我们只需要调用next, next, next… 。...在运行脚本并查看MissingLink dashobard的准确性,请记住这一点。 在这个特定的例子中,似乎每50次迭代就会降低准确度。...常用的错误 3: 忘记在.backward()之前进行.zero_grad() 当在 “loss”张量上调用 “backward” ,你是在告诉PyTorch从loss往回走,并计算每个权重对损失的影响有多少...在backward的时候不使用zero_grad的一个原因是,如果你每次调用step() 都要多次调用backward,例如,如果你每个batch只能将一个样本放入内存中,那么一个梯度会噪声太大,你想要在每个

1.5K30

Android使用开源组件PagerBottomTabStrip实现底部菜单和顶部导航功能

PagerBottomTabStrip 是一个基本按谷歌Material Design规范完成的安卓底部导航栏控件 官方设计规范:https://www.google.com/design/spec/components.../bottom-navigation.html 1、前言 (1)底部选择菜单功能应该是大多app都会用到的,实现方式也有很多种,比较笨的方法可以自定义一个xml,下方布局样式,每次点击不同按钮跳转到不同...2、底部导航菜单功能代码 1、首先需要引用包: compile 'me.majiajie:pager-bottom-tab-strip:2.2.5' 2、然后写一个主的activity和底部点击进入的两个...--上方导航条返回按钮-- <LinearLayout android:id="@+id/back_btn" android:layout_width="0dp" android...(2)在上里面的代码中我们使用了矢量图<Vector 功能,实现标准是美工提供.svg文件,通过studio直接转为xml文件的图片,优势是可伸缩和完美放大,体积小,需要知道一下。

1.5K31

【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )

动画效果 : Hero 通过动画从 源界面 运动到 目标界面 , 目标界面 透明度逐渐增加 , 淡入显示 ; Hero 是界面的组成部分 , 在 源界面 和 目标界面 都存在该组件 ; Hero...动画涉及到的 API 较多 ; 一、创建 Hero 动画核心组件 ---- Hero 动画 tag 标识 : Hero 动画作用的组件在两个界面中都存在 , 给这两个 Hero 组件都设置相同的标识 ,...通过该标识可以标识两个 Hero 组件之间进行动画过渡 ; 该 Hero 动画组件封装内容 : VoidCallback onTap : 从外部传入一个回调事件 , 这是点击组件后 , 回调的函数 ;..., 其 tag 与源界面 HeroWidget 组件相同 , 这样就可以保证这两个界面互相跳转 , 能触发 Hero 动画 ; MaterialPageRoute( builder: (context...context).pop(); }, ), ), ), ); } ) 四、页面跳转 ---- 使用

83920

使用React Hooks 要避免的5个错误

首页 专栏 javascript 文章详情 0 使用React Hooks 要避免的5个错误! ?...很有可能你已经读过很多关于如何使用React Hook 的文章。但有时候,知道何时不使用与知道如何使用同样重要。 在这篇文章中,主要介绍一下 React hooks 错误使用方式,以及如何解决它们。...有条件地执行 Hook 可能会导致难以调试的意外错误。React Hook的内部工作方式要求组件在渲染之间总是以相同的顺序调用 Hook。...2.不要使用过时状态 下面的组件MyIncreaser在单击按钮增加状态变量count: function MyIncreaser() { const [count, setCount] = useState...在进行递增操作,单击umount 按钮,卸载组件。React会在控制台中警告更新卸载组件的状态。 ?

4.2K30

使用 React Hooks 要避免的6个错误

image.png 今天来看看在使用React hooks的一些坑,以及如何正确的使用避免这些坑。...当组件执行时,会获取导数据并更新状态。但是这个组件有一个警告: 这里是告诉我们,钩子的执行是不正确的。因为当id为空组件会提示,并直接退出。...这样有条件的执行钩子时就可能会导致意外并且难以调试的错误。实际上,React hooks内部的工作方式要求组件在渲染,总是以相同的顺序来调用hook。 ​...不要在不需要重新渲染使用useState 在React hooks 中,我们可以使用useState hook来进行状态的管理。虽然使用起来比较简单,但是如果使用不恰当,就可能会出现意想不到的问题。...因此,当遇到这种需要在组件使用一个变量在渲染中保持其状态,并且不会触发重新渲染,那么useRef会是一个更好的选择,下面来对上面的例子使用useRef进行改编: const Counter = ()

2.2K00
领券