Flutter第十四弹 抽屉菜单效果

2024-06-20 12:04

本文主要是介绍Flutter第十四弹 抽屉菜单效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目标:

1.怎么构建抽屉菜单效果?

2.抽屉菜单怎么定制?

一、抽屉菜单

侧滑抽屉菜单效果

1.1 抽屉菜单入口

Flutter 的脚手架Scaffold,默认提供了抽屉菜单效果入口。

主页面采用一个简单的页面,侧滑菜单首先使用一个Image,先看看侧滑效果。 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myflutter/drawer/widget/main_drawer.dart';void main() => runApp(DrawerApp());/*** 构建抽屉菜单APP** @author zhouronghua* @time 2024/6/20 上午9:47*/
class DrawerApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("抽屉菜单"),),drawer: Drawer(/// 自定义抽屉菜单Widgetchild: MainDrawer(),),body: new MainPage(),),);}
}/*** 主页面** @author zhouronghua* @time 2024/6/20 上午10:02*/
class MainPage extends StatelessWidget {@overrideWidget build(BuildContext context) {// 主页面简单一个容器return Container(child: Text("我是主页面"),);}
}

显示效果:

 1.2 

这篇关于Flutter第十四弹 抽屉菜单效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1078077

相关文章

以canvas方式绘制粒子背景效果,感觉还可以

这个是看到项目中别人写好的,感觉这种写法效果还可以,就存留记录下 就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。 附上demo下载地址。 https://download.csdn.net/download/u012138137/11249872

echarts省份标注加散点效果

这个是安徽的效果图,鼠标移到红色标注或者对应的市区位置都会显示对应的数值。 先直接上代码: import anhuiMapJson from './anhui.json'getCoords: function(city) {var res = [];if (city != null) {for (var c in this.cityMap.features) {if (this.cityMa

XMG 抽屉效果

1.比如说我创建了3个View -(void)viewDidLoad{  [ super viewDidLoad]; [self setUpChild] ;         UIPanGestureRecognizer *pan=[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];

2_为MFC程序添加菜单

在MFC中添加菜单栏 1,双击资源文件,显示资源视图,点击Menu插入Menu菜单,编辑菜单的ID,自己取名字。 2,点击“请在此处键入”添加菜单选项,输入&E,E的下面就会产生下划线;在产生的弹出菜单中继续编辑,并且可以添加事件处理函数; 在弹出菜单的任意位置,鼠标右键,弹出的菜单中选择“插入分隔符”,即可产生分隔符 3,在你设计的Dialog窗口的属性栏,选择Menu后面的

Flutter ListView详解

文章示例代码 ListView常用构造 ListView 我们可以直接使用ListView 它的实现也是直接返回最简单的列表结构,粗糙没有修饰。 ListView 默认构建 效果 ///默认构建 Widget listViewDefault(List list) { List _list = new List(); for (int i = 0; i < list.length;

33个jQuery与CSS3实现的绚丽鼠标悬停效果

只要你有创意,完全可以使用CSS3来实现漂亮的动效,当然如果配合jQuery,这样会更加强大,实现更多高级绚丽的动画效果。鼠标hover效果是很常用的,虽然很细微的东西,但网站的细节注定的网站的体验,所以也不要忽视这些小细节。 今天设计达人网整理了33个使用jQuery与CSS3实现绚丽的鼠标悬停效果,有些是纯CSS3的,这些效果你完全可以用在你的网页上,让网站获得更好的体验。 Anim

把Sublime Text 2 加入右键菜单(带图标), Edit with Sublime Text

Sublime Text 2 是现在很受大家欢迎的编辑器了,不仅是在web前端,在书定简单的php、Js等代码时,也是相当的好用,再配合多种的插件和新颖的界面,更是让人欲罢不能。 在使用时,我们通过喜欢打开一个文件的时候,右击再选择打开程序,比如会用记事本、Notedpad++之类的,这时如果把Sublime Text也加入到其中毕竟会方便不少,在找了一番后,实验成功,效果如下: 实现

自定义recyclerView实现时光轴效果

时光轴效果在很多app上都有出现,例如淘宝中快递的跟踪,本文将使用recyclerView实现时光轴效果,我们会到自定义控件,首先先看一下效果图: 接下来是步骤分析 1自定义属性 这个大家应该都了解了,根据我们之前的分析,直接在attrs.xml中进行声明 <declare-styleable name="TimeLine"><attr name="beginLine" f

Flutter原理—深入Widget原理

事实上在 Flutter 中渲染是经历了从 Widget 到 Element 再到 RenderObject 的过程。 Widget 只是 Element 的一个配置描述 ,告诉 Element 这个实例如何去渲染。 Widget 和 Element 之间是一对多的关系 。实际上渲染树是由 Element 实例的节点构成的树,而作为配置文件的 Widget 可能被复用到树的多个部分,对应产

Android滑动回弹效果

原理: addHeaderView里做的事: 1.测量出header的宽高,调用了measureView方法 2.设置LayoutParams,宽:MATCH_PARENT,高:10 3.设置topMargin的值为负的header的高度,即将header隐藏在屏幕最上方 onInterceptTouchEvent: 如果滑动距离为零,让onInterceptTouchEvent处理。屏