Flutter 抽屉效果

最新推荐文章于 2024-03-28 03:12:03 发布
最新推荐文章于 2024-03-28 03:12:03 发布
阅读量2k 收藏 6
点赞数
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangQingLei0307/article/details/118857489
版权

在开发过程中我们可能会用到抽屉效果，弹出的界面我们可以进行很多操作，在原生开发中相比大家对这都不陌生，那么Flutter中抽屉效果是如何实现的呢？

首先感谢两位大佬提供资料，两位大佬的博客分别为大队辅导猿、rhyme_lph。如果也可以看一下两位大佬的详细接收，我这里只介绍实现和使用，下面先上效果图。

这个我们主要使用的Flutter提供的组件就是drawers， 那我们具体如何实现呢，由于直接使用drawers，会出现指定抽屉宽度，无法进行修改宽度，这里我就要处理一下。

下面还是老样子，我直接上带吗讲解

首先我们直接绘制drawers组件（SmartDrawer）剩下的就是使用了。

import 
了解本专栏 订阅专栏 解锁全文 超级会员免费看
王 哪跑！！！
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
flutter仿抖音首页面效果
03-14
本课程将使用 flutter 实现类似抖音首页面效果 通过 TabBar 与 TabBarView 结合使用 实现仿抖音APP首页面 关注 与推荐 页面左右滑动ui构建通过 PageView 来实现上下整屏切换效果使用 VideoPlayer组件实现视频播放功能通过 CircularProgressIndicator实现 有圆形背景样式的按钮浮在视频列表上方来实现控制视频的播放与暂停，并会综述一个 Align 在手机坐标系中的对齐方式通过 ClipOval、CachedNetworkImage 实现圆形头像通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 ListView 实现弹框显示评论列表功能通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 GridView 实现弹框显示九宫格列表功能
flutter上拉抽屉效果 flutter拖动抽屉效果
代码小疯子
07-05 2714
1、 抽屉关闭状态时点击标签抽屉会向上打开，也可配置关闭这个功能； 2、 抽屉关闭状态时，向上滑动，滑动过一定的高度时自动向上滑动打开，当没有滑动过一定的高度时，自动向下滑动，呈关闭状态； 3、 抽屉打开状态时，当滑动视图处于顶部时，向下滑动，抽屉自动向下滑动关闭，可配置形状是否开启这个功能 4、 抽屉打开状态时，当向下滑动抽屉时，没有滑动到一定的距离时放开，抽屉会自动向上滑动回到打开状态，当滑动到一定的距离时放开，抽屉会自动向下滑动到关闭状态； 5、 抽屉关闭状态时，向上轻扫抽屉，抽屉会向上滑动到打开状态
Flutter 上下抽屉效果(一行代码实现)
qq_28510317的博客
04-29 765
最近使用flutter实现了一个上下的抽屉效果，使用起来方便，一行代码，话不多说，直接上效果及代码： 效果： 视频效果： 使用代码： 核心代码： 核心代码下载链接（答应我，不白嫖，给颗星）： https://github.com/huangzhiwu1023/flutter_Drawer demo地址（先给星，再下载）： https://github.com/huangzhiwu1023/flutter_Drawer 代码...
Flutter（九）-实现抽屉动画，android基础教程第4版
最新发布
2401_83946315的博客
03-28 548
只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。腾讯、字节跳动、阿里、百度等BAT大厂 2019-2021面试真题解析资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图腾讯、字节跳动、阿里、百度等BAT大厂 2019-2021面试真题解析。
Flutter（九）-实现抽屉动画，算法真题解析：美团+Tencent+字节跳动+阿里+360+拼多多
m0_65145113的博客
12-12 267
return Container(child: Center(child: Text(“底部Widget”,),),); } } 这个Widget太简单了，就不细说了。 实现顶部Widget class UpDrawerWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container(child: Center(child: Text(“顶部Widget”,),),); } } 实
使用flutter_zoom_drawer实现带动画效果的抽屉
weixin_45628777的博客
03-19 653
其中，只有get和flutter_zoom_drawer是手动引入的，get用于状态管理，而 flutter_zoom_drawer就是实现动画抽屉效果的核心。1、每个page都new了一个新的 MyDrawerController实例，有点浪费；2、没有使用Obx（）、GetX等等去包裹需要响应式渲染的部分，不知道性能会不会有问题；4、SecondScreen：抽屉菜单对应的界面二；3、MainScreen：抽屉菜单对应的界面一；
Flutter 底部抽屉，三阶滑动；
Choi晨的博客
06-02 522
Flutter 底部抽屉，三阶滑动，但不跟随手指滑动、效果一般；Head布局可以触发抽屉滑动， 内部的Sliver布局单独滑动；
flutter 常用交互实现之 =＞ 侧边栏抽屉效果（1）
智玲君
04-18 835
flutter_slider_drawer: 1.2.1 使用示例： import 'package:flutter/material.dart'; import 'package:flutter_example/pages/main_drawer_page.dart'; import 'package:flutter_example/pages/main_screen_page.dart'; import 'package:flutter_slider_drawer/flutter_slider_dra
Flutter中的抽屉组件Drawer
越陌度阡
12-27 1519
1. 配置抽屉组件 1. drawer 左侧抽屉。值的类型为Widget； 2.endDrawer 右侧抽屉。值的类型为Widget； 代码示例： import "package:flutter/material.dart"; class CategoryPage extends StatefulWidget { CategoryPage({Key key}) : super(key: key); _CategoryPageState createState() => .
Flutter之抽屉组件Drawer
01-07
Drawer（抽屉组件） 1、概述 Scalfold 是 Flutter MaterialApp 常用的布局 Widget，接受一个 drawer属性，支持配置 Drawer，可以实现从侧边栏拉出导航面板，好处是把一些功能菜单折叠起来，通常Drawer是和Listview...
Flutter 实现进度条效果
08-19
在一些上传页面炫酷的进度条效果都是怎么实现的，今天小编通过本文给大家分享Flutter 一行代码快速实现你的进度条效果，感兴趣的朋友一起看看吧
Flutter Drawer 侧滑菜单、抽屉
10-26
Flutter Drawer 侧滑菜单、抽屉
Flutter CustomScrollView 自定义滚动效果
10-26
Flutter CustomScrollView 自定义滚动效果。
Flutter Tween实现抖动效果
03-29
抖动效果实现起来并不难，主要是使用动画时定义一个摇摆的曲线。可应用于错误反馈等。
Flutter InkWell水波纹效果
10-26
Flutter InkWell水波纹效果。
Flutter 下拉刷新、上拉加载flutter_easyrefresh的使用
热门推荐
WangQingLei0307的博客
06-29 1万+
在开发过程中我们经常使用到列表，而使用列表我们就很容易使用到下拉刷新和上拉加载。 而这个时候我们就可以使用大佬为我们封装好的插件进行更加方便的使用。 今天向大家介绍的插件是flutter_easyrefresh，flutter_easyrefresh在我们开发中使用还是比较多的，下面给大家介绍一下flutter_easyrefresh 先附上两张效果图，分别是刷新和加载 下面就是集成 首先我们先导入自己所需要的使用的插件版本，如果插件版本和Flutter版本对应不上，会提示错误，我们根据.
Flutter 编写插件flutter_plugin（包含Android、iOS）实现过程
WangQingLei0307的博客
01-25 9621
随着Flutter 日渐成熟，使用Flutter 也越来越多，作为一个跨平台的语言，他的展示效果和操作流畅度 可以和原生媲美，这也Flutter 越来越受欢迎的原因。 虽然Flutter 越来越强大，但是总有一些力不从心的时候，现在大厂开发的SDK 如 极光推送、地图 等插件 并没有提供 Flutter 版本，而我们使用的插件也是 一些开发者自己进行实现的，而对于一些冷门的插件，是根本没有，但是在开发过程中我们又要使用到。这个时候我们就要自己写一些插件了。 下面我们就要通过iOS、Android 、Fl
Flutter 实现pdf、word、excel、png、ppt等文件预览功能
WangQingLei0307的博客
09-15 9110
在开发过程中，我们很少会遇到预览pdf、word、excel、png、ppt等文件的功能，但是很巧的本人就遇到了，由于第一次使用这个功能，着实是让人挠头啊，最后终于得到解决。 其实实现预览功能很简单，Flutter的插件库就为我们提供了很好的插件 flutter_full_pdf_viewer: ^1.0.1 官网给的文件 import 'dart:async'; import 'dart:io'; import 'package:flutter/foundation.dart'; impor
Flutter TextField跟随键盘弹出和收回（类似于今日头条的评论）
WangQingLei0307的博客
07-07 4932
在开发过程中，我们会遇到输入框跟随键盘上下移动的效果（例如今日头条，当我们点击评论框时候，评论框会自动跟随键盘上移或收回），在原生开发这个效果很简单，那么Flutter如何实现呢？向上一下效果图 编辑前： 编辑后： 那么这项过如何实现呢？废话不多说直接上代码 Container( child: AnimatedPadding( padding: MediaQuery.of(context).viewInsets, //边距（必要） .
flutter 抽屉
09-13
Flutter抽屉（Drawer）是一个常用的界面组件，用于在...总的来说，Flutter抽屉是一个非常实用的功能组件，可以帮助我们实现各种界面效果和交互功能。通过灵活运用，我们可以创建各式各样的抽屉，使应用更加美观和强大。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王 哪跑！！！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值