利用Material Design的移动应用程序有两个必不可少的导航选择。这些导航是“选项卡和抽屉”。抽屉是选项卡的一种可选选择，因为有时移动应用程序没有足够的空间来帮助选项卡。 抽屉是不可见的侧屏。...它是一个向左滑动的菜单，在大多数情况下，它包含应用程序中的重要连接，并且在显示时拥有一半的屏幕。 该演示视频展示了如何在Flutter中创建可折叠的侧边栏。...我们将添加状态均值以添加可折叠的侧边栏构建器状态实例变量。...在内部，我们将添加按钮的backgroundColor。我们将添加一个菜单图标和onPressed（）方法。在此方法中，我们将定义setState（）。...当_fsbStatus等于FSBStatus.FSB_OPEN时，抽屉将关闭。否则，它们将打开。
IDE 加载完毕该应用之后，打开导航资源文件 nav_graph.xml 并在 Design 模式 (此外还有 Code 与 Split 模式) 下查看。您会看到当前应用导航图的样子。...这一次，导航是由抽屉式导航栏中的菜单项触发的 当用户点击 DrawerLayout 中的菜单项时，应用会导航至和那些菜单项关联的目的地。...从工具 (Tools) 菜单启动布局检查器 (Layout Inspector) 布局检查器 (Layout Inspector) 让我们可以以图形化的方式查看整个应用的视图层次结构，同时我们也可以看到每一个容器及视图的属性...应用展示了 NavigationView (抽屉式导航栏) 覆盖在 activity 内容上方 接下来是 NavigationView，它是一个从左边划入的抽屉式导航栏。...大部分的导航相关的图像更新发生在 NavHostFragment 内部，但是系统中仍然存在其他需要更新且不在容器内的部件，比如我们上面看到的抽屉式导航栏，以及类似 tab bar 的元素 (该组件可以被用来展示当前目的地信息
比如 Navigator.pushNamed(context, '/');当部件Widget在StatelessWidget.build函数被返回时，这个部件会成为父部件。...所以这意味着StatelessWidget.build方法中的context和函数内部部件Widegt的context不是同一个上下文。所以它们两个不同上下文能够调用的方法是有区别的。...persistentFooterButtons - 固定在下方显示的按钮，比如对话框下方的确定、取消按钮。drawer - 抽屉菜单控件。...1、在flutter里面，一切皆组件，在组件里面撑起flutter半边天的一个是无状态StatelessWidget组件，一个是有状态的StatefulWidget组件2、常用组件container:容器组件...persistentFooterButtons - 固定在下方显示的按钮，比如对话框下方的确定、取消按钮。drawer - 抽屉菜单控件。
Scaffold 实现基本的材料设计视觉布局结构。 ? 此课程提供了用于显示抽屉，短文本和底部表的API。...ScaffoldState, 这是与这个小部件相关的状态. material.google.com/layout/structure.html 继承结构 Object>Diagnosticable>DiagnosticableTree...hasDrawer(BuildContext context, { bool registerForUpdates: true }) → bool 最接近的上下文中的展示台是否有抽屉. [...]...下图显示了当书写语言是从左到右（例如英语）时，每个插槽出现在工具栏中的位置： ? 如果省略了leading小部件，但AppBar位于带有抽屉的展示台中，则会插入一个按钮以打开抽屉。...，表示有一天将添加其它部件的位置。
导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。...有三种状态： unlocked (默认值)，意味着此时抽屉可以响应打开和关闭的手势操作。 locked-closed，意味着此时抽屉将保持关闭，不可用手势打开。...locked-open，意味着此时抽屉将保持打开，不可用手势关闭。 无论抽屉处于那种状态，都仍然可以调用openDrawer/closeDrawer这两个方法打开和关闭。...drawerWidth number 指定抽屉的宽度，也就是从屏幕边缘拖进的视图的宽度。...onDrawerStateChanged function 每当抽屉的状态变化时调用此回调函数。抽屉可以有3种状态： idle（空闲），表示现在导航条上没有任何正在进行的交互。
示例包括返回上一页的导航箭头或打开抽屉的菜单图标。 当上一条路线可用时，导航箭头会自动出现。...leading来打开抽屉。...), Flutter AppBar 中心标题 actions actions是与 AppBar 右侧对齐的小部件列表。我们通常在用作按钮的应用程序中看到它们来触发下拉菜单、个人资料头像等。...工具栏高度和不透明度 最后，我们有工具栏属性。工具栏包含文字，图标，按钮，和其他任何公司的前景，除了小部件，如Container和Image。...( leading, title, 和actions) 如何自定义 AppBar 的布局和添加小部件 如何为 AppBar 的图标、文本、背景、高度、阴影颜色和工具栏设置主题 所以我们有了！
主内容区的布局代码必须放在侧滑菜单布局的前面, 因为 XML 元素按 z 序（层叠顺序）排列，并且抽屉式导航栏必须位于内容顶部。...(int gravity)：判断边栏是否打开 参数gravity必须与 XML 中一致，同样有四种选择： Gravity.LEFT Gravity.RIGHT Gravity.START Gravity.END...mDrawerLayout.setDrawerListener(new DrawerListener() { /** * 当抽屉滑动状态改变的时候被调用 * 状态值是STATE_IDLE...* 抽屉打开的时候，点击抽屉，drawer的状态就会变成STATE_DRAGGING，然后变成STATE_IDLE */ @Override public void onDrawerStateChanged...void onDrawerSlide(View arg0, float arg1) { } /** * 当一个抽屉被完全打开的时候被调用 */ @Override
可以理解为，工具箱有很多抽屉，每次只能打开一个，抽屉里可以放很各种各样的东西，例如QQ的好友分组，每个分组下有不同数目的联系人。...点击不同抽屉时，会触发currentChanged信号 import sys from PyQt5.QtGui import QIcon from PyQt5.QtWidgets import QApplication...，序号从0开始。...可以实现在同一区域中自由切换不同页面的内容，该控件是一个容器类控件，并提供友好的页面切换方式。...它是放置在QMainWindow中的中央窗口小部件周围的停靠窗口小部件区域中的次要窗口。QDockWidget由一个标题栏和内容区域组成。标题栏显示浮动窗口小部件窗口标题，浮动按钮和关闭按钮。
本文实例为大家分享了DrawerLayout结合Tollbar实现菜单侧滑的具体代码，供大家参考，具体内容如下 ?...DrawerLayout(抽屉布局)：谷歌官方的控件，可以简单的实现侧滑菜单； 此Demo主要是DrawerLayout结合Toolbar实现侧滑左上角返回键实现动画效果，点击左上角返回键实现动画效果并且滑出滑入侧滑菜单...-- 侧滑菜单 android:layout_gravity="start"从左边滑出 android:layout_gravity="end"从右边滑出 -- <LinearLayout...closed } }; //第二步：该方法会自动和actionBar关联, 将开关的图片显示在了action上，如果不设置，也可以有抽屉的效果，不过是默认的图标 mDrawerToggle.syncState...(); //第三步：设置抽屉滑出来，和滑进去的监听 mDrawerLayout.setDrawerListener(mDrawerToggle); 以上就是本文的全部内容，希望对大家的学习有所帮助
我们的这个抽屉导航视图一开始是看不见的，就像抽屉一样，你不拉开抽屉你看不到东西，所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定...locked-open，意思是此时抽屉将保持打开，不可用手势关闭。 记住：无论抽屉处于那种状态，我们都可以调用openDrawer/closeDrawer这 两个方法打开和关闭。...unlocked (默认值)，意思是此时抽屉可以响应打开和关闭的手势操作。...抽屉可以有3种状态： dle（空闲），表示现在导航条上没有任何正在进行的交互。 dragging（拖拽中），表示用户正在与导航条进行交互。...renderNavigationView 该方法用于渲染一个可以从屏幕一边拖入的导航视图 statusBarBackgroundColor color 使抽屉导航覆盖整个屏幕，并绘制状态栏的背景，使其能够在覆盖到状态栏
* 抽屉打开的时候，点击抽屉，drawer的状态就会变成STATE_DRAGGING，然后变成STATE_IDLE */ @Override...mDrawerLayout.closeDrawers(); }else super.onBackPressed(); } } } 有更多需求的可以看下...* * 当抽屉滑动状态改变的时候被调用 * 状态值是STATE_IDLE（闲置--0）, STATE_DRAGGING（拖拽的--1）, STATE_SETTLING...* 抽屉打开的时候，点击抽屉，drawer的状态就会变成STATE_DRAGGING，然后变成STATE_IDLE */ @Override...解决方法： //这里设置clickable(true) 必须动态设置 静态设置没有效果 //解决问题 侧滑菜单出来的时候 点击菜单上的区域会有点击穿透问题
我们实现一个页面，它包含： 一个导航栏 导航栏右边有一个分享按钮 有一个抽屉菜单 有一个底部导航 右下角有一个悬浮的动作按钮 代码如下： class ScaffoldRoute extends StatefulWidget...//其它属性见源码注释 }) 如果给Scaffold添加了抽屉菜单，默认情况下Scaffold会自动将AppBar的leading设置为菜单按钮（如上面截图所示），点击它便可打开抽屉菜单。...icon: Icon(Icons.dashboard, color: Colors.white), //自定义图标 onPressed: () { // 打开抽屉菜单...如果开发者提供了抽屉菜单，那么当用户手指从屏幕左（或右）侧向里滑动时便可打开抽屉菜单。...Drawer组件作为根节点，它实现了Material风格的菜单面板，MediaQuery.removePadding可以移除Drawer默认的一些留白（比如Drawer默认顶部会留和手机状态栏等高的留白
github地址：https://github.com/shuaijia/MaterialDesignProject 简介 DrawerLayout是Support Library包中实现了侧滑菜单效果的控件...； DrawerLayout分为侧边菜单和主内容两个部分，侧边菜单可以根据手势或点击控制展开与隐藏，主内容区可随菜单点击而切换（自己实现）； DrawerLayout 提供 当界面弹出的时候，主要内容区会自动背景变黑...，当点击内容区的时候，抽屉布局会消失 在屏幕边缘手势滑动 会拉出抽屉布局 注意：当按后退键的时候，如果抽屉布局正在显示，则需要关闭抽屉布局 效果 ?...判断打开状态 ? 控制手势 ? 监听事件 ?...点击事件穿透问题 DrawerLayout界面点击事件穿透问题，即点击Drawerlayout上面的区域，会发现该位置DrawerLayout覆盖掉的区域的控件可以被点击 解决方法：在抽屉完全打开时设置
它们通常与 app 内容共面并影响屏幕的布局网格。 Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。 它们只能用于平板电脑和台式机。...为了点击 bottom app bar 的菜单图标后提高可达性，它们从屏幕底部打开而不是从侧面打开。 ---- 分解 Navigation drawers 包含嵌入在 sheet 内的 list。...导航抽屉表可以从屏幕左侧出现 (1)，或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5％ ?...standard dismissible navigation drawer会保持打开状态，直到再次点击menu icon (2) ?...调整 bottom navigation drawer 的打开位置，以便在屏幕底部剪切最后一个视图中的列表项。 这可以通知用户有更多项目要查看。
就是从右往左滑出菜单 android:background="#ffffcc" android:choiceMode="singleChoice" android:divider...} 三）监听抽屉的打开关闭事件 使用ActionBarDrawerToggle，最早的时候在v4包里，现在谷歌把它搬到了v7包里，所以要引入v7依赖包 在引入v7包的时候，我遇到了一个错误，support...这是因为v7包版本过低，解决方法是在project:properties里target=android-8改为21以上就好 当抽屉打开的时候，标题栏改为”请选择”,当抽屉关闭的时候，标题栏变为原来的app...，因此要调用invalidateOptionsMenu()会重绘actionBar上的菜单项，执行这个方法的时候会回调onPreareOptionsMenu()，所以我们可以在这里通过判断抽屉处于打开还是关闭状态...()来判断，如果打开了就隐藏菜单项 @Override public boolean onPrepareOptionsMenu(Menu menu) { /*在这里通过判断DrawerLayout
Activity自带actionBar 2.从Android3.0(APIlever11)开始，所有使用Theme.Holo主题（或者它的子类）的activity都包含了actionbar，当 targetSdkVersion...-- 按钮没有按下的状态 --> <item android:state_focused="true" android:state_selected="false"
ActionBar 低版本和高版本用法不同 低版本： 1. 引用v7-appcompat 2....Activity自带actionBar 2.从Android3.0(APIlever11)开始，所有使用Theme.Holo主题（或者它的子类）的activity都包含了actionbar，当 targetSdkVersion...-- 有焦点的状态 (例如D-Pad控制或者鼠标经过) --> <item android:state_focused="true" android:state_selected...drawerLayout=(DrawerLayout) findViewById(R.id.dl); drawerLayout.openDrawer(Gravity.RIGHT);// 打开左面抽屉
④ HomeViewModel 二、抽屉布局 ① 添加菜单 ② 打开抽屉 三、导航疫情页面 四、动态权限请求 ① 添加依赖 ② 权限请求 五、拍照显示图片 ① ActivityResult API ②...二、抽屉布局 这个抽屉布局通过主页面的左上角的菜单点击进行打开，因此我们首先添加一个菜单按钮和一个疫情新闻按钮，在HomePage中， ① 添加菜单 增加如下代码： navigationIcon...在Scaffold要打开抽屉布局，需要使用ScaffoldState中的drawerState，可以通过更改drawerState来控制打开或关闭抽屉布局，而要更改drawerState需要通过协程或其他挂起函数...") } } 下面再我们运行一下： GitHub打开的速度比较慢，现在我们的抽屉布局就写好了，看上去也是比较舒服的。...，一般来说作为动态权限，我们需要在使用的时候再请求，而不是一打开App就请求，而我们现在的App中有一个抽屉布局，里面有一个头像，我们可以点击这个头像的时候请求动态权限，通过权限后我们提示一下，再次点击时
抽屉菜单是app上常见的菜单设计方式，典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示： 页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute布局...菜单弹出中状态 2:菜单弹入状态中 3:菜单弹出状态 firstTouchX:0, //首次触摸X坐标值 touchCheckX:60, //触发滑动的触摸X moveX:0..., // 滑动操作横向的移动距离 maxMoveX: (app.globalData.deviceInfo.windowWidth - 60), //抽屉菜单最大移动距离 lastTranlateX...: 0 //上次动画效果的平移距离，用于校准left值 }, 之后就是滑动事件的响应处理 touchstart事件，首先判断当前状态，然后根据触摸位置判断是否激活滑动状态 onMainPageTouchstart...3: 由于在真机环境下，页面左滑(初始触摸点在左侧边界时)默认行为是返回上一页或退出小程序(取决与是否是第一级页面), 抽屉菜单会和该行为发生冲突。
、headerLeft等； DrawerNavigatorConfig drawerWidth: 设置侧边菜单的宽度； drawerPosition: 设置侧边菜单的位置，支持’left’、 ‘right...接收抽屉导航器的 navigation 属性 。默认为DrawerItems。...其主要属性有： items: 路由数组，如果要修改路由可以可以修改或覆盖它； activeItemKey: 定义当前选中的页面的key； activeTintColor: 选中item状态的文字颜色；...focused: 表示是否是选中状态； tintColor: 表示选中的颜色； drawerLockMode：指定抽屉的锁定模式。...可以从props中获取； 打开侧边栏：navigation.openDrawer();； 关闭侧边栏：navigation.closeDrawer();； 切换侧边栏：navigation.toggleDrawer
领取专属 10元无门槛券
手把手带您无忧上云
