Flutter - 创建侧滑菜单(不使用navigatior,仅改变content)
之前写过一篇文章,Flutter - 创建横跨所有页面的侧滑菜单。这个里面中使用了Navigator.of(context).push来导航到新的页面。
这次介绍一种不使用导航,仅仅改变content即可。
这样做的好处是,不需要来回处理导航和路由那么个复杂的东西。
1. 准备工作
新建四个页面,Cart、JD、Taobiao、Settings。这里仅放一下Cart的代码,其他类似
import 'package:flutter/material.dart'; class Cart extends StatelessWidget{
@override
Widget build(BuildContext context){
return new Center(
child: Text('Cart'),
);
}
}
2. 添加页面引用
由于我放在了同级目录,仅作演示。所以引用如下
import './cart.dart';
import './settings.dart';
import './jd.dart';
import './taobiao.dart';
实际项目不建议这么操作,可以新建一个pages文件夹,放进去。
3. 新建一个空页面,并添加一个drawer,加入四个ListTile,分别是Cart、JD、Taobiao、Settings
void main() => runApp(new MaterialApp(
home: new NavDrawer(),
)); class NavDrawer extends StatefulWidget {
@override
_NavDrawerState createState() => new _NavDrawerState();
} class _NavDrawerState extends State<NavDrawer> {
@override
initState() {
super.initState();
} @override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new ListTile(
title: new Text("Cart"),
trailing: new Icon(Icons.local_florist),
),
new ListTile(
title: new Text("JD"),
trailing: new Icon(Icons.desktop_windows),
),
new ListTile(
title: new Text("Taobiao"),
trailing: new Icon(Icons.table_chart),
),
new ListTile(
title: new Text("Settings"),
trailing: new Icon(Icons.settings),
)
],
),
),
body: new Container( ),
);
}
}
可以看到我们并没有添加onTap事件,还有Scaffold的body是空的,暂时没有设置。
4. 添加点击事件
这里仅演示Cart的点击代码,其他类似
onTap: () {
setState(() {
content = Cart();
Navigator.pop(context);
});
},
里面有一个Cart()赋值给了content,所以需要在类_NavDrawerState的最开始定义一下
dynamic content=Cart();
同时使用了setState方法,来通知框架content的值已改变。
5. 设置Scaffold的内容
body: new Container(
child: content,
),
6. 运行调试
Flutter - 创建侧滑菜单(不使用navigatior,仅改变content)的更多相关文章
- Flutter - 创建侧滑菜单
侧滑菜单在安卓App里面非常常见,比如Gmail,Google Play,Twitter等.看下图 网上也有很多创建侧滑菜单的教程,我也来记录一下,自己学习创建Drawer的过程. 1. 创建一个空的 ...
- Flutter - 左右侧滑菜单:drawer和endDrawer
侧滑菜单可以从左面滑出,也可以从右面滑出.在Scaffold中有drawer和endDrawer两个参数,分别对应左边的菜单和右边的菜单. drawer: new Drawer( child: new ...
- Flutter - 创建横跨所有页面的侧滑菜单
前一篇博客讲到了如何创建侧滑菜单,但是再实际使用过程中,会发现,这个策划菜单只能在首页侧滑出来. 当导航到其他页面后,侧滑就不管用了.这也有点不符合良好的用户体验设计.Google Play就是很好的 ...
- Android 自定义View修炼-打造完美的自定义侧滑菜单/侧滑View控件
一.概述 在App中,经常会出现侧滑菜单,侧滑滑出View等效果,虽然说Android有很多第三方开源库,但是实际上 咱们可以自己也写一个自定义的侧滑View控件,其实不难,主要涉及到以下几个要点: ...
- AndroidUI 侧滑菜单 DrawerLayout的使用
直接上代码: activity_main.xml: <android.support.v4.widget.DrawerLayout xmlns:android="http://sche ...
- Android 打造完美的侧滑菜单/侧滑View控件
概述 Android 打造完美的侧滑菜单/侧滑View控件,完全自定义实现,支持左右两个方向弹出,代码高度简洁流畅,兼容性高,控件实用方便. 详细 代码下载:http://www.demodashi. ...
- Android_侧滑菜单的实现
1.创建侧滑菜单Fragment package com.example.didida_corder; import android.os.Bundle; import android.view.La ...
- Flutter - 创建底部导航栏
之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...
- Android 高大上的侧滑菜单DrawerLayout,解决了不能全屏滑动的问题
DrawerLayout预览 DrawerLayout主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图: 注意左上角那个图标,有木有很好玩,哈哈. ...
随机推荐
- 工作中遇到的问题收集--.NET
一.拒绝访问 temp 目录.用来运行 XmlSerializer 的标识“IIS APPPOOL\MZJYMIS”没有访问 temp 目录的足够权限.CodeDom 将使用进程正在使用的用户帐户进行 ...
- webpack分离css单独打包
这篇文章过期了,webpack4.x已经不这么用了,最新的可以看这个地址webpack实战场景系列 原文地址:http://www.izhongxia.com/posts/44724.html CHA ...
- 树莓派3B+ wifi 5G连接
新烧的Raspbian 系统,一开始需要设置wifi的一些配置,其中会选择一个国家(set country),一开始选择的是CN(中国),发现只能连接2.4G的网络,5G的网络连接不上,这很奇怪, 因 ...
- 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件
安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...
- vue-cli静态资源处理
vue-cli是利用webpack进行打包部署,其中静态资源的路径问题是一个比较麻烦的部分. 项目中共有两个存放静态文件的地方. /static 根目录下的static文件夹 assets src目录 ...
- Linux基础第一课——基础知识了解
前言 发展历史 linus 林纳斯 赫尔辛基大学 在自己的笔记本上安上自己写的操作系统 基于Linux内核 Linux内核 也是基于unix内核开发出来 unix 不开源 只能军方和大学使用 Linu ...
- <数据结构与算法分析>读书笔记--实现泛型构件pre-Java5
面向对象的一个重要目标是对代码重用的支持.支持这个目标的一个重要的机制就是泛型机制:如果除去对象的基本类型外,实现的方法是相同的,那么我们就可以用泛型实现来描述这种基本的功能. 1.使用Object表 ...
- Ubuntu16.04安装Zabbix3.2(快速安装教程)
ubuntu16.04下zabbix安装和配置 上面这篇虽然是一样的,但是针对的版本有差异,版本差异,安装方式也就有差异,对要求的环境可能有所不同. 今天帮同事安装zabbix,按照如下几个步骤,就完 ...
- python 通过shutil实现文件后缀名判断及复制
In [18]: for file in os.listdir('.'): ...: if os.path.splitext(file)[1] == '.html': ...: print(file) ...
- 理解C#的Lock语法意义
一. 为什么要lock,lock了什么? 当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步机制了,也就是说当 ...