Flutter 制作一个抽屉菜单，纯手打“RocketMQ笔记”

最新推荐文章于 2024-04-09 12:56:22 发布
最新推荐文章于 2024-04-09 12:56:22 发布
阅读量319 收藏
点赞数
分类专栏： 程序员 文章标签： 面试 java 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64383449/article/details/121898928
版权

其实在APP中，抽屉菜单就是当手指在屏幕横向滑动时候，左边屏幕会滑出或者滑入一个View的东西，就像一个抽屉。下面是我在网上找的一个示例图，和现在正跑在我的模拟器上的目标图。

示例图

目标图

在Android或者IOS上，要实现这种侧滑抽屉空间，可以使用外部库来达到效果，不过Flutter本身已经给我们提供了 Drawer 这个UI组件，来使你更轻松地达到这个效果。

Drawer及UserAccountsDrawerHeader可用属性

| Drawer属性 | 说明 |

| — | — |

| elevation | 背景高度 |

| child | 子组件 |

| semanticLabel | 标签 |

| UserAccountsDrawerHeader属性 | 说明 |

| — | — |

| decoration | 头部装饰 |

| margin | 外边距  默认8.0 |

| currentAccountPicture | 主图像 |

| otherAccountsPictures | 副图像 |

| accountName | 标题 |

| accountEmail | 副标题 |

| onDetailsPressed | 点击监听 |

实现

首先我默认大家已经搭建好了Flutter的环境并已经初步写了

最低0.47元/天 解锁文章
m0_64383449
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter中的抽屉组件Drawer
越陌度阡
12-27 1535
1. 配置抽屉组件 1. drawer 左侧抽屉。值的类型为Widget； 2.endDrawer 右侧抽屉。值的类型为Widget； 代码示例： import "package:flutter/material.dart"; class CategoryPage extends StatefulWidget { CategoryPage({Key key}) : super(key: key); _CategoryPageState createState() => .
如何使用 Scaffold Widget 和 Drawer 属性在 Flutter 中实现导航抽屉
iCloudEnd的博客
04-01 186
抽屉是一种导航菜单，可以通过单击菜单按钮来访问。单击时，抽屉会从屏幕的一侧滑入，显示可以选择的项目或菜单选项列表。这是一种在整个应用程序中导航的简便方法，并且可以根据您的设计需求进行自定义。将抽屉与脚手架小部件一起使用要在您的应用程序中创建抽屉，您首先需要创建一个脚手架小部件并将其抽屉属性设置为抽屉小部件。抽屉小部件将一个小部件作为子部件，它可以是任何小部件。但是，在本例中，我们要创建一个导航栏。
Flutter的一个简单的动画径向菜单部件
08-10
Flutter的一个简单的动画径向菜单部件
notesapp:一个笔记应用程序来学习Flutter
04-06
欢迎使用Notes 欢迎！ 笔记是一个简单但有效的应用程序，用于记录纯文本笔记并制作检查清单。 这个项目是由在一个小操场上开始的，目的是学习一种新的编程语言，但很快就演变为具有成品且可以正常工作的产品的想法。 Notes始终是一个开源且非营利的项目，有关这些主题的更多信息，请参阅“许可和分叉”部分。 特征 两种类型的注释：如果只需要写下一些内容，请使用纯文本注释；如果需要跟踪多个项目及其进度，请使用清单 创建按钮，长按并拖动以重新排序，滑动以删除：使用统一的交互系统来保持需要的内容，该系统用于笔记列表和清单中的项目列表 跟踪进度：将清单项目标记为已完成，并在列表上查看进度 您喜欢的外观：从一组预定义的主题中选择应用程序颜色主题 数据是您的：您编写的所有内容都存储在本地，我们无权访问 现代化的用户界面：Flutter的材质设计小部件为该应用程序提供了简单而又现代的外观 许可和分叉 该项目是
Flutter 制作一个抽屉菜单，大佬分享开发经验
2401_84149423的博客
04-08 254
*要想成为高级安卓工程师，必须掌握许多基础的知识。**在工作中，这些原理可以极大的帮助我们理解技术，在面试中，更是可以帮助我们应对大厂面试官的刁难。《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！识。**在工作中，这些原理可以极大的帮助我们理解技术，在面试中，更是可以帮助我们应对大厂面试官的刁难。[外链图片转存中…(img-IlTTapzN-1712508437256)][外链图片转存中…(img-mFOjzu8z-1712508437257)]
flutter ExpansionTile 层级菜单的实现
08-25
主要介绍了flutter ExpansionTile 层级菜单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
隐藏抽屉菜单是一个用于添加带有透视动画的精美抽屉模式菜单功能的库。-Flutter开发
05-27
隐藏抽屉菜单隐藏抽屉菜单是一个用于添加带有透视动画的精美抽屉模式菜单功能的库。 您可以使用预定义的“隐藏抽屉菜单”“隐藏抽屉菜单”是一个用于添加带有透视动画的精美抽屉模式菜单功能的库。 您可以使用预定义菜单或进行完全自定义的菜单。 下载APK示例使用默认菜单导入'package：hidden_​​drawer_menu / hidden_​​drawer / hidden_​​drawer_menu.dart'; void main（）=> runApp（MyApp（））; 类MyApp扩展了StatelessWidget {
Flutter Drawer 侧滑菜单、抽屉
10-26
Flutter Drawer 侧滑菜单、抽屉
flutter drawer (抽屉)
学习笔记
08-26 577
flutter 如何增加 side drawer 侧抽屉
Flutter（九）-实现抽屉动画
最新发布
yjqdn82212的博客
04-09 990
/ 初始化动画控制器，这里限定动画时常为200毫秒// vsync对象会绑定动画的定时器到一个可视的widget，所以当widget不显示时，动画定时器将会暂停，当widget再次显示时，动画定时器重新恢复执行，这样就可以避免动画相关UI不在当前屏幕时消耗资源。// 当使用vsync: this的时候，State对象必须with SingleTickerProviderStateMixin或TickerProviderStateMixin；
Flutter（九）-实现抽屉动画，Android开发者值得深入思考的几个问题
2401_84149875的博客
04-08 875
文章会持续更新的。绝对干货！！！Android进阶学习全套手册关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。
可从上往下拉的下拉抽屉式控件
05-17
仿下拉抽屉式控件，可从上往下拉，并且默认会有一部分内容显示出来另外加上popwindow
Android之抽屉效果的下拉菜单(上下伸缩和展开)
12-02
实现了一个Android的抽屉效果的下拉菜单(上下伸缩和展开)，和大家一起交流学习，如果有更好的实现效果，也请分享一下(注：积分只是希望能评论的方式。）【联系方式：评论即可】
sprung:利用真实的物理原理在Flutter中驱动逼真的动画
05-06
弹跳 弹簧是易于使用的曲线，它使用真实的物理方程式来驱动动画。 容易食用 Sprung具有三个Sprung.underDamped曲线，即Sprung.underDamped ， Sprung.criticallyDamped和Sprung.overDamped 。 这是入门的最佳方法。 AnimatedContainer ( curve : Sprung .underDamped, /// ... ), 当您需要更好的控制时，请使用默认阻尼的构造函数，它具有可忽略的阻尼值。 AnimatedContainer ( /// Critically damped by default with a value of `20` curve : Sprung (), /// ... ), AnimatedContainer ( /// Easily adjust d
使用flutter_zoom_drawer实现带动画效果的抽屉
weixin_45628777的博客
03-19 703
其中，只有get和flutter_zoom_drawer是手动引入的，get用于状态管理，而 flutter_zoom_drawer就是实现动画抽屉效果的核心。1、每个page都new了一个新的 MyDrawerController实例，有点浪费；2、没有使用Obx（）、GetX等等去包裹需要响应式渲染的部分，不知道性能会不会有问题；4、SecondScreen：抽屉菜单对应的界面二；3、MainScreen：抽屉菜单对应的界面一；
Flutter 底部抽屉，三阶滑动；
Choi晨的博客
06-02 549
Flutter 底部抽屉，三阶滑动，但不跟随手指滑动、效果一般；Head布局可以触发抽屉滑动， 内部的Sliver布局单独滑动；
分享一个实现侧滑菜单的Flutter页面所遇到的问题与解决思路
wzj_what_why_how的博客
01-10 1308
最近做了一个需要实现侧滑菜单相关的Flutter新页面，页面布局结构稍微比较复杂。因此，做完之后就对研发的过程做出一些整理。以下主要整理跟侧滑菜单相关的内容。直奔主题，首先，要实现侧滑菜单，有以下几个方案。而本次选取的方案，是使用Scaffold 的 endDrawer的方式。在使用这个方案的同时，也是遇到了一些问题……
Flutter Navigation drawer 导航抽屉（翻译），缓存架构技术
2401_84149570的博客
04-08 947
现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。用途：平板和台式机。
使用flutter制作一个登录界面
05-12
好的，下面是一个简单的登录界面示例，使用了 Flutter 的 Material Design 风格。 首先，在 `pubspec.yaml` 文件中添加 Material Design 库： ```yaml dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 material_design_icons_flutter: ^3.6.95 ``` 然后，在 `lib/main.dart` 文件中编写代码： ```dart import 'package:flutter/material.dart'; import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Login Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: LoginPage(), ); } } class LoginPage extends StatefulWidget { @override _LoginPageState createState() => _LoginPageState(); } class _LoginPageState extends State<LoginPage> { final _formKey = GlobalKey<FormState>(); String _email; String _password; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Login'), ), body: Center( child: Form( key: _formKey, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ TextFormField( decoration: InputDecoration( labelText: 'Email', prefixIcon: Icon(MdiIcons.email), ), keyboardType: TextInputType.emailAddress, validator: (value) { if (value.isEmpty) { return 'Please enter your email'; } return null; }, onSaved: (value) { _email = value; }, ), TextFormField( decoration: InputDecoration( labelText: 'Password', prefixIcon: Icon(MdiIcons.lock), ), obscureText: true, validator: (value) { if (value.isEmpty) { return 'Please enter your password'; } return null; }, onSaved: (value) { _password = value; }, ), SizedBox( height: 24, ), RaisedButton( onPressed: () { if (_formKey.currentState.validate()) { _formKey.currentState.save(); // TODO: Perform login action } }, child: Text('Login'), ), ], ), ), ), ); } } ``` 这个示例中，我们使用了 `Form` 和 `TextFormField` 来创建表单，使用了 Material Design 风格的图标来增强用户体验。 在表单的提交按钮中，我们可以执行具体的登录操作。你可以根据自己的需求来实现这个逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值