单击底部菜单时如何打开侧边导航抽屉？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

Flutter 可折叠边栏

一个可在Flutter应用中创建可折叠的侧边栏导航抽屉的 Flutter 插件。...，底部导航栏，滑动选项卡等。...它是一个向左滑动的菜单，在大多数情况下，它包含应用程序中的重要连接，并且在显示时拥有一半的屏幕。该演示视频展示了如何在Flutter中创建可折叠的侧边栏。...它显示了在flutter应用程序中使用foldable_sidebar包可折叠的侧边栏将如何工作。它显示了当用户点击浮动操作按钮时，抽屉将以折叠方式显示/隐藏。它会显示在您的设备上。...我们将添加一个菜单图标和onPressed（）方法。在此方法中，我们将定义setState（）。当_fsbStatus等于FSBStatus.FSB_OPEN时，抽屉将关闭。否则，它们将打开。

8.5K5 0

导航设计的10种模式

导航设计的目的就是需要突出产品的核心，扁平化用户的任务路径。让用户能够顺利的在产品中畅行，让用户时刻清楚自己在应用中所处的位置，及如何前往目的页面。...06 抽屉式导航描述：抽屉式也是谷歌提出来的一种导航模式，由于虚拟按键的存在，所以在安卓上使用底部Tab会造成双底栏，视觉观感不佳；一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，或者不那么需要频繁切换内容的应用...缺点：用户不易发现，使用次功能需要二次点击，给用户在切换功能带来了操作成本；可见性太差，用户还没能把汉堡菜单按钮和侧边栏联系起来，所以，侧边栏的渗透率很低；不直观、不适用于主导航、如遇频繁操作的功能...07 下拉式/菜单导航描述：与抽屉式导航的目的相同，都是为了突出内容。...优点：菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置；缺点：位于屏幕上方，相对隐蔽且不能结合手势操作，不适合于频繁的切换功能使用；考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容

5K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

它们可以永久在屏幕上显示，也可以通过导航菜单图标进行控制。...Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。它们只能用于平板电脑和台式机。在手机上，使用 modal drawers 代替。 ?...为了点击 bottom app bar 的菜单图标后提高可达性，它们从屏幕底部打开而不是从侧面打开。 ---- 分解 Navigation drawers 包含嵌入在 sheet 内的 list。...导航抽屉表可以从屏幕左侧出现 (1)，或者在与 bottom app bar (2)同时使用时从屏幕底部打开。范围小于62.5％ ?...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部而不是左侧或右侧边缘的 modal drawers。

5.3K4 0

Material Design — 底部导航（Bottom Navigation）

点击底部导航的图标可以：1、直接将你带到相关页面；2、刷新当前页面。底部导航主要用于移动端，为了在pc端实现类似效果，可以使用侧边导航。...更大的显示器，如pc端，可以通过使用侧边导航实现类似的效果。例如，紧凑的“rail”处理处理方式默认展示导航图标。 ? 左：移动端右：pc端什么时候用？...底部导航应该用于： 3-5个重要性相同的一级页面，且需要从app 中任何地方直接访问目的地（超过6个：app中一直存在的持久抽屉导航persisitent navigation drawer）（不满...超过6个就不要放在底部导航里了，太挤了底部导航和标签当组合底部导航和tabs时要注意，因为这样的组合可能会因为用户不知道二者的优先级而在导航时引起混乱。...底部导航icon 点击底部导航icon将直接带你到相关页面，或刷新当前页面。每个icon必须指向目的地，并且不能打开菜单或对话框。

5.4K9 1

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

createDrawerNavigator抽屉效果，侧边滑出： ?...、headerLeft等； DrawerNavigatorConfig drawerWidth: 设置侧边菜单的宽度； drawerPosition: 设置侧边菜单的位置，支持’left’、 ‘right...’，默认是’left’； contentComponent: 用于呈现抽屉导航器内容的组件，例如导航项。...接收抽屉导航器的 navigation 属性。默认为DrawerItems。...其中路由名openDrawer对应这打开侧边栏的操作，DrawerClose对应关闭侧边栏的操作，toggleDrawer对应切换侧边栏操作，要进行这些操作我么还需要一个navigation，navigation

9.4K1 0

iOS好用的第三方侧边栏控件——MMDrawerController

，其支持左侧抽屉和右侧抽屉，可以很好的支持导航控制器，并且支持开发者对手势和动画进行自定义。...MMOpenDrawerGestureMode) { //没有手势此模式为默认模式 MMOpenDrawerGestureModeNone = 0, //在导航栏上拖动时可以打开侧边栏...= 1 << 2, //在中心视图控制器的视图边缘20个单位内拖动时可以打开侧边栏 MMOpenDrawerGestureModeBezelPanningCenterView...MMCloseDrawerGestureMode) { //没有关闭手势 MMCloseDrawerGestureModeNone = 0, //在导航栏上拖动时可以关闭侧边栏...= 1 << 3, //点击导航栏时可以关闭侧边栏 MMCloseDrawerGestureModeTapNavigationBar = 1 << 4, //点击中心视图控制器视图时可以关闭侧边栏

3.6K2 0

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

前言做过安卓原生开发的童鞋们应该都做过侧边栏这个东西，而且对于开源框架SlidingMenu和android官方侧滑菜单DrawerLayout应该都不陌生。...有三种状态： unlocked (默认值)，意味着此时抽屉可以响应打开和关闭的手势操作。 locked-closed，意味着此时抽屉将保持关闭，不可用手势打开。...locked-open，意味着此时抽屉将保持打开，不可用手势关闭。无论抽屉处于那种状态，都仍然可以调用openDrawer/closeDrawer这两个方法打开和关闭。...onDrawerClose function 每当导航视图（抽屉）被关闭之后调用此回调函数。 onDrawerOpen function 每当导航视图（抽屉）被打开之后调用此回调函数。...settling（停靠中），表示用户刚刚结束与导航条的交互，导航条正在结束打开或者关闭的动画。

8.1K4 0

安卓软件开发：使用Jetpack Compose实现DrawerMenuApp

一、项目背景在现代应用中，导航是关键元素，特别是使用侧边栏（Drawer Menu）切换不同页面的场景。...在点击菜单项时，会关闭抽屉并切换到对应的页面内容。 2.5 定义Drawer菜单项内容 DrawerContent 负责展示菜单项内容。...ModalDrawerSheet (1) 场景：ModalDrawerSheet 是最常见的 Drawer 类型，用于显示在应用的内容之上，当 Drawer 打开时，主界面会被覆盖，需要用户手动关闭或点击其他地方来收起抽屉...(3) 适用场景： • 比如一个购物应用中的导航栏，当用户点击左上角的菜单按钮时，抽屉滑出，显示购物车、收藏夹、账户信息等。二....五、总结通过这个DrawerMenuAppDemo，展示了如何在Jetpack Compose M3中实现一个带有抽屉菜单的安卓应用，添加更多的菜单项以及对应的页面功能。

3.3K5 1

131.HarmonyOS NEXT 实战案例五:SideBarContainer 侧边栏容器实战：悬浮模式侧边栏（Overlay）

1.2 Overlay模式的应用场景Overlay模式的侧边栏在以下场景特别有用：移动应用的主导航：提供应用的主要导航选项筛选面板：在搜索结果或列表页面提供筛选选项设置菜单：显示应用设置选项用户个人中心...：特别适合手机等小屏设备，可以最大化利用屏幕空间通常配合半透明遮罩：侧边栏显示时，主内容区域通常会添加半透明遮罩，提示用户当前焦点在侧边栏二、实战代码实现2.1 基本结构首先，让我们看一下移动端抽屉菜单的基本结构...，我们实现了：用户信息区域：显示用户头像、用户名和邮箱菜单选项：使用自定义的MenuItem构建器创建多个菜单项，包括图标和标题底部退出按钮：提供退出登录功能交互功能：点击菜单项时，更新currentIndex...显示半透明遮罩层点击遮罩层时，关闭侧边栏使用opacity(0.5)设置遮罩层的透明度4.2 手势控制在移动应用中，通常可以通过从屏幕左侧向右滑动手势打开侧边栏，通过从屏幕右侧向左滑动手势关闭侧边栏。...HarmonyOS NEXT的SideBarContainer组件的Overlay模式创建移动端抽屉菜单。

4710 0

Flutter开发-容器类组件

一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。...我们实现一个页面，它包含：一个导航栏导航栏右边有一个分享按钮有一个抽屉菜单有一个底部导航右下角有一个悬浮的动作按钮代码如下： class ScaffoldRoute extends StatefulWidget...、导航栏菜单、导航栏底部的Tab标题等。...//其它属性见源码注释 }) 如果给Scaffold添加了抽屉菜单，默认情况下Scaffold会自动将AppBar的leading设置为菜单按钮（如上面截图所示），点击它便可打开抽屉菜单。...如果开发者提供了抽屉菜单，那么当用户手指从屏幕左（或右）侧向里滑动时便可打开抽屉菜单。

4.7K2 0

TAB导航与侧边抽屉导航的巅峰对决

你一定会首先想到去设计一个底部或顶部的Tab导航。等一下，多出来的一排导航看上去有点碍眼？我们尝试下把他们收到侧边栏里，或者叫安卓团队给它的名字“侧边抽屉导航”。...但从另外一个角度来说，没有那一排tab导航，让设计看上去干净多了，把导航放进侧边抽屉里，让主内容区域有了更大的空间余地。侧边抽屉导航这种设计模式兴起于18个月前。...而后，友好而乐于提供指导的Google Play团队建议侧边栏抽屉式导航（navigation drawers）作为一种新的导航方式用于安卓应用。所以6个月后，我们决定冒险尝试改为侧边栏导航。...为了保证用户能清楚地发现侧导航，我们在应用初次打开的时候，设置侧边栏是展开显示着的，像下图这样： ? 新版本刚发布的时候，我们的用户反馈很棒（都是诸如“喜欢新的设计，全5分！”...在我们通过A/B test决定侧边栏不适合我们产品的时候，facebook也发布了应用的新版本，还是采用了固定的底部tab导航。所以，在iPhone上他们最终还是选择了保守的导航方式。

3.6K7 0

Flutter 的 Drawer 侧边栏以及侧边栏布局

简而言之就是，新建一个Drawer组件，然后配置给Scaffold组件的drawer属性，这样就实现侧边栏抽屉视图了。...endDrawer: Drawer( child: Text("右侧侧边栏"), ), //配置顶部导航栏 appBar: AppBar...), body: _tabPages[_tabbarIndex], bottomNavigationBar: BottomNavigationBar( //这里是配置底部...3，抽屉视图通过 Drawer 组件来实现。 4，我们可以自己来配置抽屉视图，一般是通过Column组件来定义侧边栏的内容。 5，Divider组件可以用来实现分割线。...那么，当点击抽屉视图中的某个组件来跳转到另外一个页面，然后从这个页面返回的时候，如何让抽屉视图消失呢？

6.7K2 0

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》050-Element Plus数据承载相关组件示例

我们将通过具体的代码示例，展示如何使用表格组件展示复杂的数据列表，包括排序、筛选和编辑功能；如何利用树形控件展示层级结构的数据；以及如何使用分页组件优化大量数据的显示效果。...2.4 抽屉（el-drawer）点我打开抽屉...一个 el-container 可以包含 el-header（头部）、el-aside（侧边栏）、el-main（主内容区域）和 el-footer（底部）。...、、、：分别代表页面的头部、侧边栏、主内容区域和底部。...抽屉（el-drawer）：通过按钮控制抽屉的显示，提供额外的信息或功能。布局（el-container）：创建了一个包含头部、侧边栏、主内容区和底部的布局结构。

4631 0

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

2.9 组件（Components）底部导航（Bottom navigation）编辑编辑显示效果编辑标准示例 ** 底部动作条（Bottom Sheets） ** ...使用悬浮按钮要遵循以下规则：建议只用一个悬浮按钮悬浮按钮可以贴在纸片边缘或者接缝处，但不要贴在对话框、侧边抽屉和菜单的边缘悬浮按钮不能被其他元素盖住，也不能挡住其他按钮列表滚动至底部时，悬浮按钮应该隐藏...（Navigation drawer）编辑侧边抽屉从左侧滑出，占据整个屏幕高度，遵循普通列表的布局规则。...手机端的侧边抽屉距离屏幕右侧56dp。编辑侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。 ...如果没有侧边抽屉，则放在Appbar的下拉菜单底部。编辑编辑设置界面只能包含设置项，诸如关于、反馈之类的界面，入口应该放在其他地方。设置项使用通栏分隔线来分组。7项以下不必分组。

8.6K2 0

Android开发之DrawerLayout实现抽屉效果

使用注意点 1、DrawerLayout的第一个子元素必须是默认内容，即抽屉没有打开时显示的布局（如FrameLayout），后面紧跟的子元素是抽屉内容，即抽屉布局（如ListView）。...抽屉菜单的宽度应该不超过320dp，这样用户可以在菜单打开的时候看到部分内容界面。...4、打开抽屉： DrawerLayout .openDrawer(); 关闭抽屉：DrawerLayout.closeDrawer( ); 一个典型的布局实例： <android.support.v4...drawerLayout.setScrimColor(Color.TRANSPARENT); 4、如何填充抽屉的划出后与屏幕边缘之间的内容（即上面的灰色部分）？...app:headerLayout="@layout/header" //导航的顶部视图 app:menu="@menu/menu_drawer_left" /> //导航的底部菜单

8.7K6 0

Axure实战06:创建一个AppleSymbol图标库网站

基础样式-侧边导航栏我们先分析下AppleSymbol图标库网站的结构，它由一个侧边导航栏和内容展示区组成，当我们点击侧边导航栏的菜单时，右侧内容区域将展示不同的内容。...交互动作-侧边导航栏为了实现单选的效果，我们需要选中一个侧边导航栏菜单时，选中单个。这里引用“选项组”的概念，选项组中，交互唯一。...示例：当我们点击侧边导航栏的“导航菜单”时，内容区域的“内联框架”应该展示“导航菜单”的页面。...我们双击侧边导航栏进入内页，选中“导航菜单”，在“交互”工具栏中，在“单击时”下点击“添加动作”，选择“在框架中打开链接”，选择目标为“内联框架”，选择链接到“导航菜单”页面。...同理，我们给每一个菜单都这么设置，这样我们点击单个菜单时，内联框架就会打开对应的页面。

3.5K2 0

Flutter容器类组件

Scaffold(脚手架) 5.1 Scaffold介绍一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部 Tab 导航菜单等。...下面构造一个完整的路由页面对其进行讲解: 导航栏导航栏右侧分享按钮抽屉菜单底部导航栏悬浮按钮 class HomePage extends StatefulWidget { const HomePage...drawer 抽屉菜单 bottomNavigationBar 底部导航栏 floatingActionButton 浮动按钮 5.2 AppBar AppBar是一个Material...风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等。...如果开发者提供了抽屉菜单，那么当用户手指从屏幕左（或右）侧向里滑动时便可打开抽屉菜单。

4.7K4 0

在 Windows 11 上关闭弹出窗口最正确方法

向下滚动到底部并取消选中“提供有关如何设置我的设备的建议”和“在我使用 Windows 时获取提示和建议”框。...适用于 Microsoft Edge 打开 Microsoft Edge，然后单击屏幕右上角的“三点”菜单图标。点击“设置”。在左侧面板中，单击“Cookie 和站点权限”。...以下是您可以打开它的方法：在“设置”菜单中，单击“隐私、搜索和服务”。现在，确保打开“跟踪预防”。然后单击“严格”以确保阻止所有网站的跟踪器。...对于谷歌浏览器打开谷歌浏览器并点击右上角的“三点”菜单图标。然后点击“设置”。在“隐私和安全”下单击“站点设置”。现在向下滚动并找到“弹出窗口和重定向”并单击它。...gpedit.msc 现在使用左侧边栏导航到以下路径。

10.3K1 0

侧边栏容器实战：悬浮模式侧边栏（Overlay）进阶篇

/HarmonyosNextCaseStudyTutorial ，欢迎fork & star效果演示一、状态管理进阶在基础篇中，我们已经实现了移动端抽屉菜单的基本布局和功能。...在本篇教程中，我们将深入探讨如何通过状态管理和交互功能增强，使侧边栏更加智能和易用。...：当拖动偏移量超过一定阈值（这里是140像素）时，显示完整侧边栏预览内容：在拖动过程中显示简化版的侧边栏内容，提供视觉反馈2.3 主题切换为了支持深色模式，我们可以添加主题切换功能：@Entry@Componentstruct..., subItemId }) // 这里可以根据需要处理子菜单项点击事件 // 例如，导航到特定页面或执行特定操作 // 关闭侧边栏 this.isSideBarShow...通过这些增强功能，我们的移动端抽屉菜单不仅具有基本的导航功能，还提供了更好的用户体验和更丰富的交互方式。这些技术可以应用于各种移动应用场景，例如社交应用、电商应用、内容应用等。

3820 0

Android UI 备忘：DrawerLayout

大家在各种 APP 中看到的左侧边栏就是这个控件。 ? 创建 DrawerLayout 最好是界面的顶级布局，否则可能出现触摸时间被屏蔽的问题。它拥有两个子元素，第一个是主内容，第二个是菜单内容。...主内容区的布局代码必须放在侧滑菜单布局的前面, 因为 XML 元素按 z 序（层叠顺序）排列，并且抽屉式导航栏必须位于内容顶部。...菜单布局必须设置layout_gravity属性，它表示侧滑菜单的滑出方向。...* 抽屉打开的时候，点击抽屉，drawer的状态就会变成STATE_DRAGGING，然后变成STATE_IDLE */ @Override public void onDrawerStateChanged...void onDrawerSlide(View arg0, float arg1) { } /** * 当一个抽屉被完全打开的时候被调用 */ @Override

1.3K3 0

点击加载更多

Flutter 可折叠边栏

导航设计的10种模式

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

Material Design — 底部导航（Bottom Navigation）

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

iOS好用的第三方侧边栏控件——MMDrawerController

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

安卓软件开发：使用Jetpack Compose实现DrawerMenuApp

131.HarmonyOS NEXT 实战案例五:SideBarContainer 侧边栏容器实战：悬浮模式侧边栏（Overlay）

Flutter开发-容器类组件

TAB导航与侧边抽屉导航的巅峰对决

Flutter 的 Drawer 侧边栏以及侧边栏布局

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》050-Element Plus数据承载相关组件示例

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

Android开发之DrawerLayout实现抽屉效果

Axure实战06:创建一个AppleSymbol图标库网站

Flutter容器类组件

在 Windows 11 上关闭弹出窗口最正确方法

侧边栏容器实战：悬浮模式侧边栏（Overlay）进阶篇

Android UI 备忘：DrawerLayout

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐