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

Flutter学习笔记:BottomNavigationBar实现多个Navigation

最近我研究了一Flutter,但是在使用Navigator的时候遇到了一个很头痛的问题,就是当我们去来回切换导航按钮,Flutter会重新build,从而导致控件重新Build,从而会失去浏览历史。...如果我们现在运行应用程序,我们可以看到推送在选择列表项正常工作,并且BottomNavigationBar保持不变。 棒极了!? ?...我们可以独立地推送/弹出每个导航器,并且后台导航保持他们的状态。? One more thing 如果我们在Android上运行应用程序,当我们后退按钮,我们会发现一个有趣的现象: ?...如果我们再次运行应用程序,我们可以看到后退按钮会解除所有推送路线,只有当我们再次我们才会离开应用程序。 ?...他的想法是使用Stack with Offstage来保持导航器的状态

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

你的 Link Button 能让用户选择新页面打开吗?

“在窗口中打开链接”(无障碍)通过Tab,选中链接Shift + 回车键Enter3....通过event参数判断下有没有Ctrl或Command:如果有,就新标签页打开;否则本页面跳转。...某些逻辑,只希望本页面跳转执行,不允许新页面打开执行(因为JS只能执行本页面的JS,如果在新页面打开,本页面应该保持不变,不能执行那段JS,例如React Router中的)。...event.button表示的是鼠标哪个按键:0:主按键,通常指鼠标左键或默认值1:辅助按键,通常指鼠标滚轮中键2:次按键,通常指鼠标右键3:第四个按钮,通常指浏览器后退按钮4:第五个按钮,通常指浏览器的前进按钮这里我们只管理左键就好...按照规范,这些键,不应该在本页面继续跳转,而是会发生这些事:ctrlKey + click: Mac上表示右键点击该元素,Windows上表示新标签页打开页面。

6.8K171

Human Interface Guidelines —— 导航栏(Navigation Bars)

Navigation Bars 位置 Navigation Bars显示在app屏幕的顶部,位于status bar(状态栏)下方,并可穿过一系列不同层级的屏幕进行导航。 ...内容 当显示一个新的屏幕,一个后退按钮(通常标有前一个屏幕的标题)出现在该bar的左侧。...---- 导航栏标题(Navigation Bar Titles) 考虑在navigation bar中显示当前视图的标题。 在大多数情况,标题可以帮助人们了解他们正在查看的内容。...但是,如果您实现了自定义后退按钮,请确保它仍然看起来像后退按钮,直观,与剩下的页面交互方式保持匹配,并始终贯穿于您的应用程序中。...如果您使用自定义图像替换系统提供的后退按钮V形图像,则也需要提供自定义遮罩图像。 iOS使用此遮罩在转场按钮标题设置动画效果。 ·不要包含多段面包屑路径。

2.4K110

无限滚动加载最佳实践

这种技术很简单,就是页面往下滚动的时候保持刷新。 ? 这项技术使用户在没有打断和额外交互的情况滚动列表 —— 随着用户滚动,一条条的内容就出现了。...导航保持可见 使用无限滚动时候,最好保持导航条持续可见,这样可以很快导航到页面或应用的不同区域,对用户来说也更简单。如果找不到导航条,用户将不得不一路向上将页面滚回去。 ?...返回按钮将用户待回至之前的位置 有时候,无限滚动的实现带来一个主要的可用性缺陷:滚动位置并未被记录为“状态”。如果用户从列表中的链接跳转了,然后点返回按钮,他们希望能回到页面原来相同的位置。...Flickr 监听用户点击浏览器后退按钮的行为,满足用户的期望。APP 记住用户的滚动位置,所以当用户后退按钮的时候,返回到原始位置。 ? 4....加载新内容提供视觉反馈 当内容在加载的时候,用户需要明确的指示,说明正在进行中。使用进度指示(process indicator)让用户知道,新内容正在加载,很快就会在页面上显示。

4.2K20

​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之布局菜单(三)

UI界面 效果 [布局菜单首页] 首页 [布局菜单展开] 业务数据菜单展开 [布局菜单设置] 设置页面 说明 布局主页分为三个部分, 最上面为导航栏,主要包括刷新按钮后退按钮,用户信息等内容。...同样地,URL 中各段动态路径也某种结构对应嵌套的各层组件,例如: 设置Setting页面和关于About页面切换的时候,导航和菜单部分都不变,变化的是主体部分,可以通过嵌套路由实现。...$route.meta.isAllowBack获取值,然后设置全局Vuex状态config/isAllowBack的值。...$store.state.config.isAllowBack; } } } MainLayout.vue中通过computed计算属性isAllowBack绑定q-btn,这样可以控制后退按钮是否显示...首页不需要后退,设置页面和关于页面就需要后退后退按钮主要目的是适应不同的浏览器,不依赖浏览器的后退功能,比如H5页面全屏或者嵌入到Cordova壳子里面的时候就非常有用了。

76330

Matplotlib 中文用户指南 7.1 交互式导航

以下是工具栏底部的每个按钮的说明: Home(首页)、Forward(前进)和Back(后退按钮: 这些类似于 Web 浏览器的前进和后退按钮。 它们用于在之前定义的视图之间来回浏览。...当你释放它,你的点处的数据将移动到你释放的点。 如果在平移时'x'或'y',移动会分别限制在x或y轴。 鼠标右键并将其拖动到新位置来进行缩放。...开始缩放鼠标下的点会保持静止,你可以缩放图形中的其它任意点。 你可以使用快捷键'x','y'或CONTROL分别将缩放约束为x轴,y轴或保留宽高比。 使用极坐标绘图,平移和缩放功能的行为不同。...+ w 将平移/缩放限制于x轴 使用鼠标平移/缩放按住x 将平移/缩放限制于y轴 使用鼠标平移/缩放按住y 保留宽高比 使用鼠标平移/缩放按住CONTROL 切换网格 鼠标在轴域上g 切换...x轴刻度(对数/线性) 鼠标在轴域上L或k 切换y轴刻度(对数/线性) 鼠标在轴域上l 如果你使用matplotlib.pyplot,则会为每个图形自动创建工具栏。

2K20

Material Design — 提示框( Dialogs)

这可保证了无论项目在列表中什么位置,被选项与标题均保持可见。 否则,标题会随内容一起滚动离开视野。 内容滚动,操作始终保持原位。 提示框与底层父级材料是分开的,不会随其滚动。 ?...操作机制: ·立即选择一个选项,提交选项并关闭菜单; ·触摸提示框外部或后退键,取消操作并关闭对话框。 减少打扰 简单提示框比简单菜单更具中断性,应该谨慎使用。 ?...例如,用户可以聆听多个铃声,但只能在触摸“ok”进行最终选择。 点击确认对话框中的“取消”,或Android的“后退”,取消操作,放弃所有更改并关闭对话框。 ?...确认按钮将被禁用,直到满足对话框中的所有必填字段都完成,确认操作才会被激活 丢弃(离开) 丢弃操作(屏幕左上角的“X”)和后退按钮均会关闭全屏对话框并放弃之前所做的更改。...左:不要用“关闭”这样的词作为确认    右:离开进行提示 导航 全屏幕对话框中使用的“X”不同于向返回箭头,箭头能表示视图的状态实时被保存。

5K101

游戏优化系列一:海外谷歌应用适配相关

状态栏消息推送 3. 系统主题风格 4. 导航键 5. 屏幕适配 6. 返回按钮 1....状态栏消息推送 在游戏应用中进行版本迭代,如果游戏本身有消息推送,且SDK中也有推送的情况,发送消息的notify方法中,id有可能不同,此时会出现两条消息(游戏的和SDK的),有可能会被Google...返回键功能的官方解释: 1.具有与屏幕上任何后退或关闭按钮相同的功能 2.暂停和取消暂停游戏(如果适用) 3.关闭所有对话框窗口 4.导航到菜单堆栈中的上一个位置(如果适用) 5.第一次登录,在主菜单中退出应用程序...,在服务器选择和字符选择页面中,Android后退按钮出现错误行为。...具体情境: (1)在游戏启动、资源加载过程,点击系统返回按钮要求能够后退,或者弹框提示用户是否退出游戏;(部分应用在这过程屏蔽了系统按钮,出现被谷歌应用商店拒绝的情况) (2)活动弹窗显示,点击返回系统按钮要求能够关闭弹窗

10.6K40

iOS 11 更大的导航 (官方翻译版)

导航导航栏出现在应用程序屏幕顶部的状态栏下方,并可以通过一系列分层屏幕进行导航。当显示新屏幕,通常标有前一屏幕标题的后退按钮出现在栏的左侧。...提示不需要导航使用工具栏,或者想要多个控件来管理内容。请参阅工具栏。 导航栏标题 考虑在导航栏中显示当前视图的标题。在大多数情况,标题可帮助人们了解他们正在查看的内容。...导航栏控件 避免拥挤导管栏的控制太多。通常,导航栏不应包含视图的当前标题,后退按钮和管理视图内容的一个控件。如果您在导航栏中使用分段控件,则该栏不应包含标题或除分段控件之外的任何控件。...使用标准后退按钮。人们知道标准的后退按钮可以让他们通过信息层次来回溯步骤。但是,如果您实现自定义后退按钮,请确保它仍然像后退按钮,行为直观,与您的界面的其余部分相匹配,并始终贯穿您的应用程序。...后退按钮总是执行单个操作 - 返回到上一个屏幕。如果您认为在没有当前屏幕的完整路径的情况,人们可能会迷失方向,请考虑对应用程序的层次结构进行展平。 给文本标题按钮足够的空间。

2.8K30

最新iOS设计规范三|3大界面要素:栏(Bars)

一、导航栏(Navigation Bars) 导航栏出现在页面的顶部,位于状态栏下方,可以给一系列层级页面进行导航。当点击进入新页面,其导航栏的左侧会出现一个返回按钮,并带有前一页面的标题。...导航栏控件 避免在导航栏上挤满太多控件。通常,导航栏最多只能包含视图的当前标题,后退按钮以及一个用于管理视图内容的控件。如果在导航栏中使用分段控件,则该栏不应包含标题或分段控件以外的任何控件。...你可以同时提供自定义的蒙版图像,以便系统在转场过渡使用此蒙版为按钮标题设置动画效果。 不要包括多段面包屑路径。后退按钮始终执行单个操作:返回上一屏幕。...隐藏状态的内容。默认情况状态栏的背景是透明的,是可以看到背后的内容的。保持状态栏可读,并不意味着其背后的内容是可交互的。...当人们导航到您应用中的其他区域,请不要隐藏标签栏。标签栏可为您的应用启用全局导航,因此它在任何地方都应保持可见。模态视图例外。

9.8K10

Visual Studio 调试系列4 单步后退来检查旧应用状态(使用使用 IntelliTrace 窗口)

IntelliTrace 后退会在每个断点处及调试器步骤事件发生自动拍摄应用程序的快照。 凭借记录的快照便可以返回到上一个断点或步骤,并查看当时应用程序的状态。...如果希望查看以前的应用程序状态,但不想重新启动调试或重新创建所需应用状态,使用 IntelliTrace 后退可以节省时间。   ...02 导航和查看快照 1、使用“调试”工具栏中的“后退”(Alt + [) 和“前进”(Alt + ]) 按钮,在事件间进行导航 。 这些按钮用于浏览“诊断工具”窗口中“事件”选项卡上显示的事件 。...后退或前进到某个事件会自动激活所选事件的历史调试。 ? 后退或前进,Visual Studio 进入历史调试模式。 在此模式,调试器上下文将切换到记录所选事件的时间。...03 IntelliTrace 后退功能与 IntelliTrace 仅事件模式有何不同 仅事件模式的 IntelliTrace 允许在调试器步骤发生和断点处激活历史调试。

3K40

JavaScript 高级程序设计(第 4 版)- BOM

这种连接一旦断开就无法恢复) 安全限制 弹出窗口被在线广告滥用,浏览器对此进行了一些限制 在用户操作西安才允许创建弹窗 网页加载过程中调用window.open()没有效果,还可能向用户显示错误 弹窗通常可能在鼠标点击或下键盘中某个键的情况才能打开...assign()方法 常见的是设置location.href,除了hash外,设置location的一个属性就会导致页面重新加载新URL 如果不希望增加历史记录,可以使用replace()方法,重定向后后退按钮是禁用状态...history 对象还有一个 length 属性,表示历史记录中有多个条目 # 导航 go() 可以在用户历史记录中沿任何方向导航,接收一个整数参数,正值表示前进负值表示后退 go()有两个简写方法:...为防止滥用,这个状态的对象大小是有限制的,通常在 500KB~ 1MB 以内 pushState()会创建新的历史记录,所以也会相应地启用“后退按钮。...对象 点击“后退按钮直到返回最初页面, event.state 会为 null 可以通过 history.state 获取当前的状态对象,也可以使用replaceState()并传入与pushState

1.2K10

AngularDart 4.0 高级-路由概述 顶

点击浏览器的后退和前进按钮,浏览器会前后浏览您浏览过的网页的历史记录。 Angular路由器借鉴了这种模式。 它可以将浏览器URL解释为导航到客户端生成视图的指令。...您可以将路由器绑定到页面上的链接,并在用户单击链接导航到适当的应用程序视图。当用户点击按钮,从下拉框中选择,或者响应来自任何来源的其他刺激,您都可以进行命令式导航。...当关联的路由链接变为活动状态,路由将router-link-active CSS类添加到元素。如上所示,您可以在AppComponent的@Component注解中将该样式与模板一起定义。...如果您点击了浏览器的后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。 Angular的应用程序像正常的网页导航一样更新浏览器的历史。 现在点击危机中心链接查看正在进行的危机列表。 ?...与英雄细节不同,当您键入更新,危机细节更改是暂时的,直到您通过“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮

6.1K20

Vue学习笔记——Vue-router「建议收藏」

『重定向』的意思是,当用户访问/a,URL 将会被替换成/b,然后匹配路由为/b /a的别名是/b,意味着,当用户访问/b ,URL 会保持为/b,但是路由匹配则为/a,就像用户访问/a 一样...4. fade-leave-active:离开过渡的结束状态,元素被删除生效,离开过渡完成后被删除。...$router.go(1) 这两个编程式导航的意思是后退和前进,功能跟我们浏览器上的后退和前进按钮一样,这在业务逻辑中经常用到。比如条件不满足,我们需要后退。...router.go(-1)代表着后退,我们可以让我们的导航进行后退,并且我们的地址栏也是有所变化的。 1.我们先在app.vue文件里加入一个按钮按钮并绑定一个goback( )方法。...$router.go(-1); } } } 打开浏览器进行预览,这时我们的后退按钮就可以向以前的网页一样后退了。

2.2K10

如何制作自己的原生 JavaScript 路由

太糟糕了,因为单击浏览器的“后退”和“前进”按钮与浏览历史记录中的 URL 导航有关。如果没有 History API,就无法谈论路由。...当用户浏览器的 Forward 按钮,将执行 history.forward(),它等效于 history.go(1)”。...go() 与 .back() 和 forward() 方法相似,不同之处在于你可以指定浏览器历史记录栈中要前进或后退的步数。。 pushState() 会将新状态推送到 History API。...使“后退”和“前进”按钮起作用 通过使用 history.pushState,你将自动使 Back 和 Forward 按钮导航到上一个或下一个状态。这样做会产生 popstate事件。...假定每次你导航到出现在路由按钮上的 URL ,实际上都会从服务器单独加载该 URL。 因此你有责任确保/page/about 将路由器和页面的加载到应用程序的根视图中。

3.8K20

最新iOS设计规范四|3大界面要素:视图(Views)

栏(Bars) 栏,可以告诉用户在APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...除非在极少的情况,必须提供指导,那么可以用“点击”这个词,在引用按钮保持大写,不要在引号中包含按钮标题。 警示框按钮 使用双按钮警示。双按钮警示框给予了用户一个比较容易的双选项的选择方式。...如果需要,可以自定义一种非线性的导航方法。使用页面视图控制器,页面只能顺序跳转,而跨页面之间是无法跳转的。如果用户想要不顺序访问页面,你可以自定义控件来实现此功能。...当用户点击浮层之外的区域或浮层中的关闭/取消按钮,浮层应该关闭。如果可以进行多次选择,则浮层还是要保持打开状态,直到用户有意识地对它进行关闭。 自动关闭非模式弹出窗口,请务必保存当前任务。...适当地使用前进和后退导航。网页视图支持前进和后退导航,但默认情况这种交互行为是被禁用了的。如果用户想通过网页视图访问多个页面,请启用前进和后退导航,并提供相应的控件来启动这些功能。

8.4K31

Material Design — 菜单(Menus)

行为 滚动 替代 Simple Dialogs ---- 用法 菜单是与按钮,动作,点或其他控件交互出现的临时材料,至少包含两个菜单项。...菜单不应该被用作app内导航的主要方法。 ? 左:应用栏中的操作太多时将会设置一个菜单    右:包含五个选项的菜单 菜单标签 按钮或控件的标签应该简洁而准确地反映菜单内的项目(如下图)。...单个菜单项状态 某些app状态可能会导致只有一个菜单项的情景菜单。 例如,当使网页上的文本高亮,Android仅显示“复制”菜单项,因为用户无法“剪切”或“粘贴”文本。 ?...理想情况,嵌套的层级都需要做显示,因为很难用嵌套多层的子菜单进行导航。 ? 菜单项例子 不可用的操作 将操作显示为不可用(如置灰)而不是将其删除,让用户知道它们可以在正确的条件下存在。...取消选择 触摸菜单外部或系统“后退按钮,取消操作并关闭菜单。 ? 简单菜单 ·打开,简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。 当前选择的菜单项突出显示(如下图)。 ?

5.8K100

测试用例(功能用例)——完整demo(一千多条测试用例)

状态的资产; 品牌统计: 在统计报表页面,点击“品牌”选项卡,进入品牌统计页面; 页面上方显示柱状图,根据资产数量升序排列; 页面下方显示列表:显示各品牌的的资产数量及相应比例; 统计时仅统计...“正常”状态的资产; 取得方式统计: 在统计报表页面,点击“取得方式”选项卡,进入取得方式统计页面; 页面上方显示柱状图,根据资产数量升序排列; 页面下方显示列表:显示各取得方式的的资产数量及相应比例...统计报表页: 点击下方“报表”选项卡,可切换至统计报表页,页面标题为“统计报表”; 该页面从上至、从左至右显示“资产状态统计”、“资产类别统计”、“供应商统计”、“品牌统计”、“取得方式统计...:显示各供应商的的资产数量及相应比例; 统计时仅统计“正常”状态的资产; 点击“<”,返回统计报表页面; 品牌统计: 在统计报表页面,点击“品牌统计”,进入品牌统计页面; 页面上方显示柱状图,根据资产数量升序排列...; 页面下方显示列表:显示各品牌的的资产数量及相应比例; 统计时仅统计“正常”状态的资产; 点击“<”,返回统计报表页面; 取得方式统计: 在统计报表页面,点击“取得方式统计”,进入取得方式统计页面

5K20

如何测试你做的项目的可访问性

input 框 通过 通过 Enter可执行搜索 “搜一按钮 通过 通过 Enter可执行搜索 筛选区 课程 通过 不通过 1....首先简单介绍它的键盘操作,更多信息可查看上面截图里的“使用指南”。 在运行 VoiceOver ,普通的键盘操作保持不变。...比如: “页面结构”导航,信息有点单薄。比如我想告诉屏幕阅读器用户,页面有搜索区域、筛选区域、列表区域和翻页区域 “页面结构”导航,有混入不恰当的信息。...比如“导航”,它其实是按钮式的翻页区域 “表单空间”导航,不够全面。页面应该告诉用户还有个“筛选”区 “链接”导航,呃...里面就有点一言难尽了。...因为它混入了“筛选”区的表单信息,也混入了“翻页”区的按钮区 当用户第一次登录他们不熟悉的页面,更倾向于用标题导航和页面结构导航;当他们熟悉了之后,表单控件和链接导航有利于提高他们的导航效率。

1.8K10
领券