,其支持左侧抽屉和右侧抽屉,可以很好的支持导航控制器,并且支持开发者对手势和动画进行自定义。...= 1 << 2, //在中心视图控制器的视图边缘20个单位内拖动时可以打开侧边栏 MMOpenDrawerGestureModeBezelPanningCenterView...点击导航栏时可以关闭侧边栏 MMCloseDrawerGestureModeTapNavigationBar = 1 << 4, //点击中心视图控制器视图时可以关闭侧边栏...时,开发者可以导入MMDrawerController+Subclass.h文件,这个文件中提供了许多控制器的监听方法供开发者重写,解析如下: //出现单击手势会回调的方法 如果要重写 必须调用父类的此方法...3.无法设置显示一个最小的抽屉宽度。 4.不能支持UITabBarController容器。 5.不能在中心视图控制器之上呈现侧边栏视图。 专注技术,热爱生活,交流技术,也做朋友。 ——珲少
项目需要用到左侧右侧各有一个抽屉视图,而这个类库可以极其简单的实现这个功能,不单单是左右各一个,它可以随意设置上下左右的抽屉视图,简直是360度想怎么抽怎么抽,这里记录一下使用方法。...就像QQ、知乎之类的效果一样,也很简单,为了方便,这里我们将中间视图包装成Nav导航视图,然后以换出左视图为例,在导航栏上左侧添加一个按钮,在按钮响应中实现唤出左侧视图: //.h文件 @property...{//未打开 [self.deckController openLeftView];//则打开左视图 } } 应用到右视图也是类似,其实这里的判断是否打开以及打开左右视图的方法很多地方都可以实用...对ViewDeck控制器设置一个值就可以了: //设置当滑动到左右边时,中间视图对点击的响应 //1.默认设置,点击中间界面不会返回中间界面,中间界面控件有响应 // self.deckController.centerhiddenInteractivity...如下: //设置左边视图显示时的宽度 self.deckController.leftSize = self.window.frame.size.width - (250); 对右侧的设置也是一样
在iOS原生开发中,实现抽屉视图还是比较麻烦的,有时还需要借助第三方组件来实现。但是在Flutter中,我们利用Drawer组件就可以很轻松实现抽屉视图。...endDrawer: Drawer( child: Text("右侧侧边栏"), ), //配置顶部导航栏 appBar: AppBar...2,配置了Scaffold的drawer属性或者endDrawer属性之后,flutter会自动帮我们在顶部导航栏的左侧或者右侧加上一个按钮,如下图所示: ?...9,当点击抽屉视图中的某个组件来跳转到另外一个页面,然后从这个页面返回的时候,默认情况下,抽屉视图是不会消失的,也就是说,再返回回来的时候,抽屉视图效果还是存在的。...那么,当点击抽屉视图中的某个组件来跳转到另外一个页面,然后从这个页面返回的时候,如何让抽屉视图消失呢?
,默认是上一个页面的标题,当然也可以自定义设置设置成null headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回" headerRight:设置导航条右侧...可以是按钮或者是其他视图控件 headerLeft:设置导航条右侧。...可以是按钮或者是其他视图控件 headerStyle:设置导航条的样式,背景色及宽高等 headerTitleStyle:设置导航栏文字样式 headerBackTitleStyle:设置导航栏"返回"...我们可以在这个属性里面设置抽屉导航的样式。...如果指定的是DrawerOpen,意思就是打开抽屉。
我们的这个抽屉导航视图一开始是看不见的,就像抽屉一样,你不拉开抽屉你看不到东西,所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定...DrawerLayoutAndroid 属性 drawerBackgroundColor color 设置抽屉导航的背景色。默认值是白色。如果你想设置抽屉的透明度,使用RGBA。...,on-drag:是当拖拽开始的时候隐藏键盘 onDrawerClose func 每当导航视图被关闭时调用的函数 onDrawerOpen func 当导航视图被打开后调用该方法 onDrawerSlide...func 每当导航视图(抽屉)产生交互相互作用的时候调用此回调函数 onDrawerStateChanged func 每当抽屉的状态变化时调用此回调函数。...renderNavigationView 该方法用于渲染一个可以从屏幕一边拖入的导航视图 statusBarBackgroundColor color 使抽屉导航覆盖整个屏幕,并绘制状态栏的背景,使其能够在覆盖到状态栏
从侧面打开的 navigation drawer 被放置在屏幕的左侧以用于从左到右的阅读顺序,放置在屏幕的右侧以用于从右到左的阅读顺序。 ?...导航抽屉表可以从屏幕左侧出现 (1),或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5% ?...只有当 app 阅读顺序是从右到左时,navigation drawer才从右侧出现 ---- Destinations(目的地) Navigation drawer 中的 destinations 采取可执行列表项的形式...如果优先考虑进行帐户切换,则可以将帐户切换器放置在导航抽屉的 header 区域 ?...调整 bottom navigation drawer 的打开位置,以便在屏幕底部剪切最后一个视图中的列表项。 这可以通知用户有更多项目要查看。
概述 最近流行 左侧抽屉式的导航条菜单,知乎,360,QQ都使用了这样的导航菜单,我们也了解下: Android Design 的流行趋势:Navigation Drawer 导航抽屉 参考这篇文章:http...特点 1.标题栏(或者actionBar) 做的有个 菜单图标按钮(三条线或者其他)。一般这样的标题栏左侧和右侧都会有图标按钮。如图1所示。...2.点击图标按钮 从左侧向右 慢慢退出一个 菜单视图(View),遮盖在 内容页(首页)的视图上,同时,产生遮盖层。如图2所示。 实 官方示例 参考自谷歌开发者网站的示例,在这个页面可以下载到示例。...,第二个是要抽屉弹出的视图。...打开后 public void onDrawerOpened(View drawerView) { // 显示导航菜单的标题
本文以下图展示的企业门户应用为例,我们来学习如何使用微搭进行企业门户应用的快速搭建。...7、在右侧的组件配置区中为宫格导航进行图片与标题配置。 8、宫格导航配置完成后,我们右键选中刚刚创建的标题组件,选择克隆,将克隆后的标题组件拖拉至宫格导航组件的下方并修改标题组件文本内容。...12、随后我们对列表视图中的图片进行数据绑定,选中列表视图下的图片组件,随后在右侧配置区中单击数据绑定按钮,绑定对应的数据字段。...实现内容列表到内容详情页的页面跳转逻辑 1、选中企业门户主页列表视图下的普通容器组件,并在右侧组件配置区单击行为配置按钮。...5、之后在内容详情页选中数据视图组件,并单击右侧配置区的数据筛选,调起数据筛选弹窗。 6、在弹窗中设置筛选条件为数据标识 等于 \_id 后保存。
抽屉(通常用于导航切换)是通过renderNavigationView方法渲染的,并且DrawerLayoutAndroid的直接子视图会成为主视图(用于放置你的内容)。...导航视图一开始在屏幕上并不可见,不过可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定。...drawerWidth number 指定抽屉的宽度,也就是从屏幕边缘拖进的视图的宽度。...onDrawerOpen function 每当导航视图(抽屉)被打开之后调用此回调函数。 onDrawerSlide function 每当导航视图(抽屉)产生交互的时候调用此回调函数。...renderNavigationView function 此方法用于渲染一个可以从屏幕一边拖入的导航视图。 样例 ?
在本教程中,您将学习其中的一些模式,以及它们如何通过在使用应用程序时创造出色的体验来帮助用户。 1.主画面 用户在打开应用程序时看到的第一个屏幕通常是最重要的。...顾名思义,您以列表格式显示数据,当单击该列表中的项目时,它将打开一个显示更多详细信息的新屏幕。 尽管此模式称为列表和详细信息,但没有理由也不能将相同的逻辑应用于网格设计。...此模式的关键特征是,列表/网格中的每个项目在被选中时都应执行显示更多详细信息的相同操作。...当您的应用程序中只有几个部分时,此模式很有用,因为它为用户提供了一种快速简便的方法来更改视图。 但是,如果要在选项卡中放入五个或更多项目,则应考虑将导航操作移到抽屉中。...根据Android的材料设计指南,选项卡也可以存在于屏幕底部,如Google+应用程序所示。 导航抽屉 导航抽屉是一个视图,可以从应用程序的侧面滑出,以便向用户显示选项列表。
何时使用模态在重要的警告时使用,避免出现严重问题、或修正已出现的问题。例如:用户未保存就要关闭时,弹出模态对话框提示用户保存。 2....登录状态失败提醒 语雀中的进行关联操作的非模态对话框,一个短小的表单:文字链设置(这里也可以使用气泡卡片组件) Gmail 中点击「写邮件」按钮,在右下角打开非模态小对话框,让用户参考下面的邮件撰写新邮件...抽屉的模态 vs 非模态 项目管理工具 Jira 的帮助文档入口在页面右侧,点开后从右侧划入非模态抽屉展示内容,这样便于用户进行对照查看和操作: 搜索功能入口在页面左侧中的导航中,点开后从左侧划入模态抽屉进行交互...原来由左侧划入的模态抽屉,点击左侧导航后从左侧划入: 当前版本使用非模态对话框模态对话框,点击顶部导航后在 icon 下方出现: 4....例如:为一个表单选择组件,从应用场景来看,对话框和抽屉皆可;从交互维度,该表单的填写需要参考表单的父级页面中的内容,则确定选择非模态抽屉模态对话框,不需要再从长短考虑。
首次启动时,Vitis分析器将打开并显示一个主屏幕,让您从“构建”和“配置文件”报告中进行选择。单击这些链接中的任何一个,将打开一个文件浏览器,使您可以选择所述类型的特定文件。 ?...您可以在“报告”视图中打开多个报告,然后通过选择视图顶部的窗口选项卡快速将其从一个报告更改为另一个报告。 Source Code:可选的源代码视图在工作区的右侧打开。...可以通过单击工具栏上的“ 最小化”按钮来折叠“报表导航器”视图和“源代码”视图 ,然后通过单击折叠视图中的“还原”按钮来还原该视图。...要关闭与“摘要”报告关联的所有打开的报告,例如“链接摘要”,请在“报告导航器”视图中右键单击“摘要”,然后选择“ 关闭选项卡”。这将关闭与“报告”视图中的摘要关联的所有打开的报告。...Binary Container:选择“二进制容器”下“报告导航器”视图中列出的报告。 对于“窗口行为”设置,可以配置以下内容: Warnings:退出或刚退出Vitis分析仪时显示警告。
一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。...MyDrawer 抽屉菜单 BottomNavigationBar 底部导航栏 FloatingActionButton 漂浮按钮 AppBar AppBar是一个Material风格的导航栏,通过它可以设置导航栏标题..., // 导航栏右侧菜单 this.bottom, // 导航栏底部菜单,通常为Tab按钮组 this.elevation = 4.0, // 导航栏阴影 this.centerTitle,...//其它属性见源码注释 }) 如果给Scaffold添加了抽屉菜单,默认情况下Scaffold会自动将AppBar的leading设置为菜单按钮(如上面截图所示),点击它便可打开抽屉菜单。...如果开发者提供了抽屉菜单,那么当用户手指从屏幕左(或右)侧向里滑动时便可打开抽屉菜单。
在Android应用中被大家熟知的导航模式是抽屉和标签形式的组合。 抽屉导航其实是一个菜单,通过点击汉堡图标,然后从左侧或右侧滑出。...左侧就是抽屉导航;右侧是标签栏 在Material Design中还有一个组件叫做底部导航。这个组件对于安卓原生应用来说也非常重要。底部的菜单项很容易点击和操作。...但是安卓规范其实不建议同时使用底部导航和标签,因为它可能会在导航时引起混乱。 底部导航(Material Design) 在Apple的人机交互规范中,没有类似抽屉菜单的标准导航控件。...而在iOS中与之类似的按钮则叫做活动按钮,通常会放在底部导航的中间 左边是标准的iOS活动按钮;右侧是标准的Android浮动按钮 IOS与Android底部操作视图的差异 在Android中有两种不同类型的底部操作视图...共享相同的父级界面(例如标签切换时的内容)一致性的移动能够强化他们的关系。
IDE 加载完毕该应用之后,打开导航资源文件 nav_graph.xml 并在 Design 模式 (此外还有 Code 与 Split 模式) 下查看。您会看到当前应用导航图的样子。...您会发现两个目的地: FirstFragment 是那个被设置为初始页或者叫首页的目的地。SecondFragment 是另外那个我们可以导航到的目的地。 ?...这一次,导航是由抽屉式导航栏中的菜单项触发的 当用户点击 DrawerLayout 中的菜单项时,应用会导航至和那些菜单项关联的目的地。...从工具 (Tools) 菜单启动布局检查器 (Layout Inspector) 布局检查器 (Layout Inspector) 让我们可以以图形化的方式查看整个应用的视图层次结构,同时我们也可以看到每一个容器及视图的属性...应用展示了 NavigationView (抽屉式导航栏) 覆盖在 activity 内容上方 接下来是 NavigationView,它是一个从左边划入的抽屉式导航栏。
使用注意点 1、DrawerLayout的第一个子元素必须是默认内容,即抽屉没有打开时显示的布局(如FrameLayout),后面紧跟的子元素是抽屉内容,即抽屉布局(如ListView)。...抽屉菜单的宽度应该不超过320dp,这样用户可以在菜单打开的时候看到部分内容界面。...解决办法:在include进的那个布局里面,添加clickable=true 2、除了抽屉的布局视图之外的视图究竟放哪里 左、右抽屉和中间内容视图默认是不显示的,其他布局视图都会直接显示出来,但是需要将其放在...drawerLayout.setScrimColor(Color.TRANSPARENT); 4、如何填充抽屉的划出后与屏幕边缘之间的内容(即上面的灰色部分)?...match_parent" android:layout_gravity="left" //左侧菜单 app:headerLayout="@layout/header" //导航的顶部视图
选择一个或多个Kafka资源,以仅将这些视图过滤为视图。您也可以搜索特定资源。您可以随时单击清除以返回完整的概览。 ?...您可以在Streams Messaging Manager的“配置”屏幕中设置将生产者视为不活动的时间。 1. 从服务窗格中选择“ Streams Messaging Manager ”。 2....单击“ 配置”,然后从“ 高级” 选项卡中选择“ 高级streams-messaging-manager-common ” 。 3....查看有关Broker主机的其他详细信息 您可以从Cloudera Manager/Ambari查看有关Broker主机的其他详细信息。要访问此信息: 1. 在左侧导航窗格中,单击Brokers。...确定您想要有关其信息的Broker。您可以滚动浏览“Broker”列表,也可以使用页面左上方的搜索栏。 3. 单击“Broker”视图右侧的Ambari图标。 ?
导航 什么是导航? 其本质就是视图之间的界面跳转,例如首页跳转到详情页。...当 N=1 时,相当于 pop() 方法的效果。 replace(route):替换当前的路由。 replacePrevious(route):替换前一个页面的视图并且回退过去。...,用来在同一屏幕下切换不同界面 DrawerNavigator: 侧滑菜单导航栏,用于设置带有抽屉导航的 由于篇幅以及本文标题,在这里,我们只讲述StackNavigator。...可以自定义,也可以设置为null headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回" headerRight:设置导航条右侧...可以是按钮或者其他视图控件 headerLeft:设置导航条左侧。可以是按钮或者其他视图控件 headerStyle:设置导航条的样式。
1 – 部署并导航到 Cloudera Data Visualization 本实验向您展示如何部署和导航到 Cloudera 数据可视化 (DataViz) 页面。...从左侧边栏中 打开项目设置,然后单击引擎选项卡。Project Settings→Runtime/Engine,选择Legacy Engine 从下拉菜单中选择数据可视化图像。...如果您不知道如何到达,请按照以下导航步骤操作: 在 Cloudera Manager 中,单击集群 > Cloudera Data Science Workbench。...单击表格视觉对象以确保它被选中(当它被选中时,您会在视觉对象周围看到一个蓝色边框)。选择表格视觉对象后,单击右侧的“Build”选项卡。 单击“Measures”输入框以将其选中。...单击右侧选项卡上的VISUAL > Settings ,然后在Axes部分中将Y Axis Scale设置为:log10 展开Marks部分并将Legend Style设置为None。
Scaffold(脚手架) 5.1 Scaffold介绍 一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部 Tab 导航菜单等。...下面构造一个完整的路由页面对其进行讲解: 导航栏 导航栏右侧分享按钮 抽屉菜单 底部导航栏 悬浮按钮 class HomePage extends StatefulWidget { const HomePage...风格的导航栏,通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等。..., // 导航栏右侧菜单 this.bottom, // 导航栏底部菜单,通常为Tab按钮组 this.elevation = 4.0, // 导航栏阴影 this.centerTitle,...如果开发者提供了抽屉菜单,那么当用户手指从屏幕左(或右)侧向里滑动时便可打开抽屉菜单。
领取专属 10元无门槛券
手把手带您无忧上云