导航抽屉列表视图的子菜单，使用Master detail Page

导航抽屉列表视图的子菜单是指在移动应用或网页应用中，通过导航抽屉（Navigation Drawer）的方式展示主要导航菜单，并在点击主菜单项后，显示相应的子菜单项的视图。

导航抽屉列表视图的子菜单通常使用Master-Detail Page（主-细节页面）的设计模式来实现。该设计模式将应用的主要功能区域（Master）和详细信息区域（Detail）分开展示，使用户可以方便地浏览和操作应用的不同功能。

在移动应用中，导航抽屉通常以侧边栏的形式展示，用户可以通过滑动或点击按钮来打开或关闭导航抽屉。导航抽屉中的主菜单项代表应用的不同功能模块或页面，点击主菜单项后，会展开显示相应的子菜单项。用户可以通过点击子菜单项来切换到不同的功能页面或执行相应的操作。

导航抽屉列表视图的子菜单在移动应用中具有以下优势：

提供了一种直观且便捷的导航方式，用户可以快速访问应用的不同功能。
节省了屏幕空间，使应用界面更加简洁和易于使用。
可以根据用户的操作习惯和个性化需求进行定制，提高用户体验。

导航抽屉列表视图的子菜单适用于各种移动应用场景，特别是那些具有多个功能模块或页面的应用，例如新闻阅读应用、社交媒体应用、电子商务应用等。

腾讯云提供了一系列与移动应用开发相关的产品和服务，包括云服务器、云存储、云数据库、云函数等。这些产品可以帮助开发者构建稳定、高效的移动应用，并提供了丰富的功能和工具来支持导航抽屉列表视图的子菜单的实现。

更多关于腾讯云移动应用开发相关产品的介绍和详细信息，请访问腾讯云官方网站：https://cloud.tencent.com/product/mobile

相关·内容

张高兴的 Xamarin.Forms 开发笔记：为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

所谓 UWP 样式的汉堡菜单，我曾在“张高兴的 UWP 开发笔记：汉堡菜单进阶”里说过，也就是使用 Segoe MDL2 Assets 字体作为左侧 Icon，并且左侧使用填充颜色的矩形用来表示 ListView...一、大纲-细节模式简介　　讲代码前首先来说说这种导航模式，官方称“大纲-细节模式”（MasterDetail）。左侧的汉堡菜单称为“大纲”（Master），右侧的页面称为“细节”（Detail）。...添加一个 Views 文件夹，用于存放子页面，向其中添加3个界面：Page1、Page2、Page3。添加一个 MasterPageItem.cs 类。 1. ...MasterPageItem.cs 　　和 UWP 的汉堡菜单一样，首先要创建一个类，作为导航的项目，用来绑定 ListView 。名字叫 MasterPageItem.cs 。　　...--大纲视图--> <!

4.5K10 0

Xamarin 学习笔记 - Page（页面）

这些视图是一组控件，在本示例中，我们用到的是：一个Label标签，一个Entry（输入文本）以及一个Button按钮。 Xamarin.Forms提供了许多可用的页面，以允许提出各种不同的导航体验。...因此，Master Detail Page容器拥有两个页面，一个是主记录页面，另一个是详细信息页面。...主记录页面将包含菜单列表，详细信息页面将显示详细信息并将链接返回主记录页面，想法很简单，如果你有任何按钮或选项在菜单中显示它但你想在一开始隐藏它们，以保持良好的UI体验。...> 在标签中，我们将定义主视图，在我们的例子中，我们有三个Button按钮用来链接我们的页面。...在标记中，如果我们没有在类的构造函数中定义它，我们将包含默认内容。这些标签对于Master-Detail 页面是必需的。

4.6K2 0

iOS 与 Android 的APP 设计差异

在Android应用中被大家熟知的导航模式是抽屉和标签形式的组合。抽屉导航其实是一个菜单，通过点击汉堡图标，然后从左侧或右侧滑出。...左侧就是抽屉导航；右侧是标签栏在Material Design中还有一个组件叫做底部导航。这个组件对于安卓原生应用来说也非常重要。底部的菜单项很容易点击和操作。...但是安卓规范其实不建议同时使用底部导航和标签，因为它可能会在导航时引起混乱。底部导航(Material Design) 在Apple的人机交互规范中，没有类似抽屉菜单的标准导航控件。...模态视图又有两种不同类型：具有不同操作内容的模态列表和用户点击“共享”图标后显示的应用列表。在iOS上也能找到类似的组件，但是在设计风格和布局上差异比较大。...左边是标准的Android底部菜单视图；右边是标准的iOS标准菜单视图在触摸范围和系统网格之间存在的差异 iOS 和 Android的触摸范围略有不同 (iOS最小的触摸范围为44px @1x，Android

3.3K1 0

Android开发之DrawerLayout实现抽屉效果

使用注意点 1、DrawerLayout的第一个子元素必须是默认内容，即抽屉没有打开时显示的布局（如FrameLayout），后面紧跟的子元素是抽屉内容，即抽屉布局（如ListView）。...抽屉菜单的宽度应该不超过320dp，这样用户可以在菜单打开的时候看到部分内容界面。...解决办法:在include进的那个布局里面，添加clickable=true 2、除了抽屉的布局视图之外的视图究竟放哪里左、右抽屉和中间内容视图默认是不显示的，其他布局视图都会直接显示出来，但是需要将其放在...与DrawerLayout一起使用可以实现通用的侧滑菜单，布局如下 <?xml version="1.0" encoding="utf-8"?...app:headerLayout="@layout/header" //导航的顶部视图 app:menu="@menu/menu_drawer_left" /> //导航的底部菜单

6K6 0

值得一看的小程序 TabBar 创意动画

为何要使用自定义 TabBar 效果呢？在页面的抽屉动画、TabBar 组件、添加图像素材按钮的多种要求下，我们只能选择使用自定义 TabBar 动画了。...1 : -1} /> 动画调研抽屉动画演示在移动端 UI 中汉堡包菜单配合抽屉式弹出动画是很常见的交互动效之一。...抽屉式动画抽屉式动画要点为页面容器内有菜单和页面主内容两个子容器带回弹效果的交互动画会更有趣 https://codepen.io/andrejsharapov/pen/jJXEGq ?...在一个实体页面内用 Tabs 组件包含多个 Tab 子页面（组件）几个组件的逻辑相对独立，切换动画会更好特别说明，Hi 头像的 TabBar并非使用 fixed 布局，而是用了页面 100% 高度配合...抽屉式动画在抽屉式动画中，抽屉菜单和页面容器的动画参数是核心，可以有一点回弹效果 .menu-main { transition: 0.35s cubic-bezier(.75,.26,.02,1.01

3.9K4 2

基础篇章：关于 React Native 之 DrawerLayoutAndroid 组件的讲解

DrawerLayoutAndroid 是通过 renderNavigationView 方法渲染的，并且它的直接子视图是放置内容的主视图。...我们的这个抽屉导航视图一开始是看不见的，就像抽屉一样，你不拉开抽屉你看不到东西，所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定...DrawerLayoutAndroid 属性 drawerBackgroundColor color 设置抽屉导航的背景色。默认值是白色。如果你想设置抽屉的透明度，使用RGBA。...func 每当导航视图（抽屉）产生交互相互作用的时候调用此回调函数 onDrawerStateChanged func 每当抽屉的状态变化时调用此回调函数。...renderNavigationView 该方法用于渲染一个可以从屏幕一边拖入的导航视图 statusBarBackgroundColor color 使抽屉导航覆盖整个屏幕，并绘制状态栏的背景，使其能够在覆盖到状态栏

2.4K7 0

Android开发(37) 使用DrawerLayout实现抽屉式导航菜单

概述最近流行左侧抽屉式的导航条菜单，知乎，360，QQ都使用了这样的导航菜单，我们也了解下： Android Design 的流行趋势：Navigation Drawer 导航抽屉参考这篇文章：http...2.点击图标按钮从左侧向右慢慢退出一个菜单视图(View)，遮盖在内容页（首页）的视图上，同时，产生遮盖层。如图2所示。实官方示例参考自谷歌开发者网站的示例，在这个页面可以下载到示例。...，第二个是要抽屉弹出的视图。...R.string.drawer_close /* "close drawer" description for accessibility */ ) { // 当导航菜单抽屉...showFragment(new HomeFragment()); // 当更换主页内的子页面(fragment)时,隐藏导航菜单

3.5K0 0

【React Native 安卓开发】----侧边栏的实现DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且DrawerLayoutAndroid的直接子视图会成为主视图（用于放置你的内容）。...导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。...drawerWidth number 指定抽屉的宽度，也就是从屏幕边缘拖进的视图的宽度。...on-drag 当拖拽开始的时候隐藏软键盘。 onDrawerClose function 每当导航视图（抽屉）被关闭之后调用此回调函数。...onDrawerOpen function 每当导航视图（抽屉）被打开之后调用此回调函数。 onDrawerSlide function 每当导航视图（抽屉）产生交互的时候调用此回调函数。

6.6K4 0

Flutter开发-容器类组件

一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。...我们实现一个页面，它包含：一个导航栏导航栏右边有一个分享按钮有一个抽屉菜单有一个底部导航右下角有一个悬浮的动作按钮代码如下： class ScaffoldRoute extends StatefulWidget...MyDrawer 抽屉菜单 BottomNavigationBar 底部导航栏 FloatingActionButton 漂浮按钮 AppBar AppBar是一个Material风格的导航栏，通过它可以设置导航栏标题...、导航栏菜单、导航栏底部的Tab标题等。...抽屉菜单页由顶部和底部组成，顶部由用户头像和昵称组成，底部是一个菜单列表，用ListView实现 FloatingActionButton FloatingActionButton是Material设计规范中的一种特殊

3.5K2 0

动效设计的空间感

无论在什么界面，点击了这个铅笔图标，你会发现，你并没有进入一个全新的界面空间，而是进入了一个临时的、具有聚焦意义的视图。在这个视图中，你可以快捷的选择一些发布信息的类型，也可以取消这个菜单。...1439278021132787.gif 译者注：iOS的Master-Detail模式纵观Tumblr的发布流程，信息的发布流程主要采用了经典的、Master－Detail视图模式。...Spotify的用户将面临隐晦的轮播效，藏的很深的模态窗口，到处都是的列表视图，突然出现的抽屉，以及乱七八糟的下拉菜单和手势。汉堡菜单中的列表项迫使用户完成复杂的流程，完成的却是简单的操作。...图解中简单的指向，会有效的帮助我们分析，减少界面空间关系的杂乱感。一些建议： 1.在混合使用轮播、滚动区域、放大和汉堡菜单的时候要审慎。...这种转场相对不“大”，这种设计模式一般体现在iOS原生的Master－Detail视图 2.但空间感的营造也不要过于刻意。否则用户可能会难以理解。

1.1K2 0

导航设计的10种模式

06 抽屉式导航描述：抽屉式也是谷歌提出来的一种导航模式，由于虚拟按键的存在，所以在安卓上使用底部Tab会造成双底栏，视觉观感不佳；一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，或者不那么需要频繁切换内容的应用...07 下拉式/菜单导航描述：与抽屉式导航的目的相同，都是为了突出内容。...一般位于产品顶部，通过点击呼出导航菜单；通常用来筛选同一信息模块下不同类别的信息，或者快速启动某些常用的功能模块，而不需要频繁的页面跳转； Android中对应的控件为spinner控件，但该控件用于同一类别下不同视图之间的切换...优点：菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置；缺点：位于屏幕上方，相对隐蔽且不能结合手势操作，不适合于频繁的切换功能使用；考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容...总结 1.底部tab式 2.顶部标签式 3.轮播式 4.宫格式 5.卡片式 6.抽屉式 7.下拉式 8.列表式 9.弹窗式 10.组合式导航可能不单单只有这几种，可能大家的叫法也不尽相同。

3.4K4 0

Android侧滑菜单之DrawerLayout用法详解

，所以必须写全包名，注意第一必须先写主视图布局，然后再写抽屉里的视图，这里我们放了ListView进入抽屉 <pre name="code" class="java" <android.support.v4...-- The Navigation view 左侧拉开之后的导航视图 -- <ListView android:id="@+id/left_drawer" android:layout_width...，动态添加碎片进入主视图 1）给抽屉里的列表项添加点击事件，每点击列表项，让其在主内容视图里添加一个Fragment，让这个Fragment里显示点击的列表项里的内容，先写这个FragmentLayout...(position),使用碎片的方法如下，获取碎片的实例之后再通过getFragmentManager()获取碎片管理器，给碎片管理器开启事务，开启事务之后的碎片管理器用replace()方法将碎片的布局替换原来的主视图布局...} 四）点击图标开闭抽屉为了更加方便的使用抽屉，我们可以通过点击图标来开闭抽屉界面 1）在onCreate()里开启app icon的功能 //开启actionBar的APP icon的功能 getActionBar

1.9K1 0

flask_admin使用教程

或者，您可以使用init_app（）方法。如果启动此应用程序并导航到http://localhost:5000/admin/，则应该会看到一个顶部带有导航栏的空白页。...向索引页添加内容（Adding Content to the Index Page）您访问http://localhost:5000/admin/时，您首先会注意到它只是一个带有导航菜单的空页面...Hello world {% endblock %} 这将覆盖默认索引模板，但仍会提供内置导航菜单。...要在这些下拉列表中嵌套相关视图，请使用添加子类别方法： admin.add_sub_category(name="Links", parent_name="Team") 并向菜单添加任意超链接：...覆盖内置视图（Overriding the Built-in Views）在某些情况下，您可能希望使用大多数内置ModelView功能，但希望替换默认的创建、编辑或列表视图之一。

4.1K2 0

android侧滑菜单控件DrawerLayout使用方法详解

drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）。...使用步骤：创建一个DrawerLayout 为了添加导航抽屉，你需要在你的布局界面中声明一个DrawerLayout对象作为布局的根节点。...同时在DrawerLayout内部添加两个view: 添加一个View，它包含应用的主内容（当抽屉隐藏时你的主要布局）；添加另一个View它包含了导航抽屉；如下面例子所示：该布局使用了DrawerLayout...：主内容View（FrameLayout在最上层）必须是Drawerlayout的第一个子节点因为XML在安排这些界面的时候是按照Z轴的顺序来安排的同时抽屉必须在主内容的顶部。...为了保证用户无论怎样都能看到主内容的一部分，导航抽屉的宽度不能超过320dp 初始化Drawer List 在你的Activity中，要做的第一件事是初始化导航抽屉的列表项。

2.2K1 0

Flutter | 容器组件

, ), ), 复制代码实际上就是给最外层套了一个Padding Scaffold，TabBar，底部导航一个完整的路由页面可能会包含导航栏，抽屉菜单(Drawer) 以及底部 Tab 导航栏菜单等...，他包含 1，导航栏，导航栏的按钮 2，抽屉菜单 3，底部导航 4，右下角悬浮按钮实现代码如下： class ScaffoldRoute extends StatefulWidget { @override...： AppBar：一个导航栏骨架 MyDrawer：抽屉菜单 BottomNavigationBar：底部导航栏 FloatingActionButton：漂浮按钮 AppBar Appbar 是一个...Material 风格的导航栏，通过他可以设置标题，导航栏菜单，导航底部tab等 AppBar({ Key key, this.leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮...//其它属性见源码注释 }) 复制代码如果给 Scaffold 添加了抽屉菜单，默认情况下， Scaffold 会自动将 AppBar 的 leading 设置为菜单按钮（如上面截图所示），点击它可以打开抽屉菜单

5.5K1 0

【软件开发规范七】《Android UI设计规范》

使用悬浮按钮要遵循以下规则：建议只用一个悬浮按钮悬浮按钮可以贴在纸片边缘或者接缝处，但不要贴在对话框、侧边抽屉和菜单的边缘悬浮按钮不能被其他元素盖住，也不能挡住其他按钮列表滚动至底部时，悬浮按钮应该隐藏...通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图，或者是弹出与 Chip 实体相关的操作菜单。狭小空间内表现复杂信息的一个组件，比如日期、联系人选择器。 ...网格列表与应用于布局和其他可视视图中的网格有着明显的区别。 ...+ 可滚动的 tab bar 编辑和 tab 指示器一样的字体颜色编辑被锁定滚动的 tab bar tab只用来展现不同类型的内容，不能当导航菜单使用。...如果没有侧边抽屉，则放在Appbar的下拉菜单底部。编辑编辑设置界面只能包含设置项，诸如关于、反馈之类的界面，入口应该放在其他地方。设置项使用通栏分隔线来分组。7项以下不必分组。

4.9K2 0

微信小程序——轮播图、组件传值、下拉刷新、导航实战开发

文章目录一、常用组件 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js 2 使用组件 - 视图容器 - swiper 二、自定义组件 - 产品列表...四、返回顶部功能实现五、实现点击商品列表进入产品的详情页面 1.构建详情页面 2.声明式导航跳转 3.详情页面接收数据并且渲染数据 4.编程式导航渲染一、常用组件在此处请求轮播图的数据。...this.setData({ bannerlist: data.data }) }) }, }) 2 使用组件 - 视图容器 - swiper 滑块视图容器.../detail/detail" ], 2.声明式导航跳转使用小程序组件-导航-navigator 页面链接。...点击不同的产品测试即可 4.编程式导航渲染使用小程序提供的api实现编程式路由的跳转 wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar

1.4K2 0

React Native 系列(八) -- 导航

导航什么是导航？其本质就是视图之间的界面跳转，例如首页跳转到详情页。...注意：导航栏一定要有尺寸，flex: 1，否则看不到子控件 image.png 使用 image.png 2.获取Navigator，实现跳转 this.props.navigator.push...，用来在同一屏幕下切换不同界面 DrawerNavigator: 侧滑菜单导航栏，用于设置带有抽屉导航的由于篇幅以及本文标题，在这里，我们只讲述StackNavigator。...title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用 header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null headerTitle...可以是按钮或者其他视图控件 headerLeft：设置导航条左侧。可以是按钮或者其他视图控件 headerStyle：设置导航条的样式。

6K8 0

『React Navigation 3x系列教程』createDrawerNavigator开发指南

path(可选)：用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到； navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight...、headerLeft等； DrawerNavigatorConfig drawerWidth: 设置侧边菜单的宽度； drawerPosition: 设置侧边菜单的位置，支持’left’、 ‘right...’，默认是’left’； contentComponent: 用于呈现抽屉导航器内容的组件，例如导航项。...接收抽屉导航器的 navigation 属性。默认为DrawerItems。...: 侧边菜单的背景； initialRouteName: 初始化哪个界面为根界面，如果不配置，默认使用RouteConfigs中的第一个页面当做根界面； order: drawer排序，默认使用配置路由的顺序

7K1 0

为任意屏幕尺寸构建 Android 界面

△ 警告窗口展开警告可以查看到 Android Studio 是否提供了修改建议，这里关于底部应用栏警告的修改建议就是使用 Navigation Rail、抽屉式导航栏，或使用顶部应用栏代替。...我们先来进行第一项优化，使用 NavRail 而非底部应用栏，首先我们要考虑的是导航模型，所幸我们不会更改很多具体的视图，仅仅只会更改导航方式，因为 NavRail 会一直存在于整个视图体系中，可以通过它导航到任何其他视图...最后，在设置 NavRail 菜单栏的 ID 来匹配现有导航目的视图的 ID，再在 MainActivity 中为 NavRail 设置 NavController: <!...由于任务和详情都呈现在 SlidingPaneLayout 中的同一个新的 Fragment 中，因此我们为该 Fragment 的导航交互专门添加一个新的子导航层次结构。...△ JetNews 侧边抽屉导航栏展示回到 JetNews，我们可以看到在大屏状态下，侧边的抽屉导航栏会以模态的方式出现，但它会延伸到整个屏幕而出现大量空白区域。

4.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云