flutter实战1:完成一个有侧边栏的主界面
经过2周的学习,看过笔记1-8的小伙伴们已经有不少开始自己写APP了,我也按耐不住这股热情,想要自己开发个APP玩玩,so,从本篇起,仿造一个APP,项目从0开始,每篇增加一些内容,一点一点完成这个APP,每次迭代的代码都将上传到我的git仓库。
鉴于我2周多的Flutter代码经验,代码结构的思维可能没有多年开发经验的老鸟稳,如果有写的不好的地方请大家多多指教。
如上图所示, 本篇将搭建一个HomePage,再其左上角加入侧边栏入口,并且通过侧边栏可以进入其他页面。
##第一步 创建项目和文件夹。打开vscode,到一个路径下输入命令:
flutter create appbyflutter
根据图中所示,将项目目录准备好:
由于第一篇开发用到的东西不多,先简单向项目目录中添加一个images文件,用于存放APP默认图片。默认的lib文件夹下添加一个pages文件夹,用于存放每个页面。
##第二步 将main.dart仅作为APP的入口,承担页面入口和路由的功能:
由于APP不只有一个页面,为了方便维护和管理,所有的页面代码都转移到pages文件夹下,main.dart中处理APP的主页面入口、路由和一系列需要初始化(如自动登陆、入场动画等)的任务。有过vue、react开发经验的前端大神们应该不陌生,这样做可以使主程序和页面解耦,当然本篇还没有用到路由,暂不书写路由的代码,等不及要了解路由的同学可以参考前端高手偏罗的第一个APP或者英文阅读理解。
##第三步 ###主页面 如第一步的图所示,在pages文件夹中添加了2个文件:home_page.dart和other_page.dart,其中home_page.dart是这个APP的主页面,other_page.dart作为的以后再开发的页面。
注意在第二步的runapp()
函数中,用到了MaterialApp()
,意味着程序APP所有的页面控件默认配套_Material_风格。
由于主页面会动态引用各种控件,因此_StatefulWidget_类型才可以满足页面需求。从下图中分解一下页面结构:
先看图左中有状态控件HomePage
为整个页面的最顶层包裹,其内放入了一个Scaffold
脚手架,Scaffold
中有非常丰富的属性,可以放入侧边栏按钮Drawer
控件、页面标题AppBar
控件和body
部分,于是贴入以下代码:
import 'package:flutter/material.dart';class HomePage extends StatefulWidget {@override_HomePageState createState() => new _HomePageState();
}class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text("CYC"), backgroundColor: Colors.redAccent,), //头部的标题AppBardrawer: new Drawer(), //侧边栏按钮Drawerbody: new Center( //中央内容部分bodychild: new Text('HomePage',style: new TextStyle(fontSize: 35.0),),),);}
}
复制代码
OK,左图的页面就这么轻松搭建完毕。要实现右图中的展开的侧边栏,很简单,向Drawer
控件中塞东西吧。
###侧边栏 我们先图解一下侧边栏的结构:
整个侧边栏主从上到下按区块分别放置了账号和若干功能项+分割线的列表,很容易想到使用布局控件
ListView
。账号信息区域中有账号头像、粉丝头像、账号文字信息和背景图,这块我们可以使用Material控件库的
UserAccountsDrawerHeader
控件实现。下面的功能列表项目不用多说,
ListTitle
控件妥妥的,分割线直接Divider
即可。
于是,我们向new Drawer()
中加入如下代码:
//侧边栏填充内容
drawer: new Drawer( //侧边栏按钮Drawerchild: new ListView(children: <Widget>[new UserAccountsDrawerHeader( //Material内置控件accountName: new Text('CYC'), //用户名accountEmail: new Text('example@126.com'), //用户邮箱currentAccountPicture: new GestureDetector( //用户头像onTap: () => print('current user'),child: new CircleAvatar( //圆形图标控件backgroundImage: new NetworkImage('https://upload.jianshu.io/users/upload_avatars/7700793/dbcf94ba-9e63-4fcf-aa77-361644dd5a87?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),//图片调取自网络),),otherAccountsPictures: <Widget>[ //粉丝头像new GestureDetector( //手势探测器,可以识别各种手势,这里只用到了onTaponTap: () => print('other user'), //暂且先打印一下信息吧,以后再添加跳转页面的逻辑child: new CircleAvatar(backgroundImage: new NetworkImage('https://upload.jianshu.io/users/upload_avatars/10878817/240ab127-e41b-496b-80d6-fc6c0c99f291?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),),),new GestureDetector(onTap: () => print('other user'),child: new CircleAvatar(backgroundImage: new NetworkImage('https://upload.jianshu.io/users/upload_avatars/8346438/e3e45f12-b3c2-45a1-95ac-a608fa3b8960?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),),),],decoration: new BoxDecoration( //用一个BoxDecoration装饰器提供背景图片image: new DecorationImage(fit: BoxFit.fill,// image: new NetworkImage('https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg')//可以试试图片调取自本地。调用本地资源,需要到pubspec.yaml中配置文件路径image: new ExactAssetImage('images/lake.jpg'),),),),new ListTile( //第一个功能项title: new Text('First Page'),trailing: new Icon(Icons.arrow_upward),onTap: () {Navigator.of(context).pop();Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new SidebarPage()));}),new ListTile( //第二个功能项title: new Text('Second Page'),trailing: new Icon(Icons.arrow_right),onTap: () {Navigator.of(context).pop();Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new SidebarPage()));} ),new ListTile( //第二个功能项title: new Text('Second Page'),trailing: new Icon(Icons.arrow_right),onTap: () {Navigator.of(context).pop();Navigator.of(context).pushNamed('/a');} ),new Divider(), //分割线控件new ListTile( //退出按钮title: new Text('Close'),trailing: new Icon(Icons.cancel),onTap: () => Navigator.of(context).pop(), //点击后收起侧边栏),],),)
复制代码
上面的代码,用到了很多陌生的控件,如UserAccountsDrawerHeader、GestureDetector、BoxDecoration、NetworkImage、ExactAssetImage等等,这里我就不一一介绍了,各自的特性和用法请参考官方阅读理解题库,刚开始我也是懵逼的,这些内置控件大家简单背诵一下即可,有可能后面因为页面复杂度的提高,单独拿出来封装也说不定,会使用就可以了。
大家可以试试从屏幕的左边沿向右滑动的手势,是不是发现可以拉出侧边栏?再向右滑动收回侧边栏。我并没有添加任何手势事件的代码,这是
Drawer
控件自带的属性,和控件自带Material风格动效一样,内置控件也自带了默认手势,隐隐听到~原生开发的程序员哭晕在厕所,哈哈哈
##第四步 ###功能按钮触发页面跳转。 首先我们要创建一个子页面,于是乎pages文件夹下,我又创建了一个other_page.dart文件。要从HomePage.dart中跳转到other_page.dart,还需要在HomePage.dart中引一下other_page.dart。于是:
然后到other_page.dart中敲入代码:
import 'package:flutter/material.dart';class OtherPage extends StatelessWidget {final String pageText; //定义一个常量,用于保存跳转进来获取到的参数OtherPage(this.pageText); //构造函数,获取参数@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text(pageText),), //将参数当作页面标题body: new Center(child: new Text('pageText'),),);}
}
复制代码
Flutter要求转入的页面必须提前定义一个常量分配好空间,且在构造函数中植入这个参数,才可捕捉外部传过来的参数值。
###触发跳转 向First Page和Second Page这两个ListTile
控件中加入点击跳转页面的代码:
new ListTile(title: new Text('First Page'),trailing: new Icon(Icons.arrow_upward),onTap: () {Navigator.of(context).pop(); //点击后收起侧边栏Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new OtherPage('First Page'))); //进入OtherPage页面,传入参数First Page}),
new ListTile(title: new Text('Second Page'),trailing: new Icon(Icons.arrow_right),onTap: () {Navigator.of(context).pop();Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new OtherPage('Second Page')));} ),
复制代码
上面的代码中onTap()
事件里有一句Navigator.of(context).pop();
,意味着先收起侧边栏,再进入新页面。如果没有这句代码,即使进入了新页面,再返回来,侧边栏依然处于展开的样子,这个体验是反人类的,所以写上它吧~少年。
##总结 由于我没有详细的去定位和设计产品到底是干什么的,大家可能会觉得有点懵逼,为什么是这种侧边栏的布局,而不是很多社交APP常用的顶部+底部Tab栏的样式,不着急,我们下一篇实现。侧边栏有什么好处呢?节省空间,如果底部需要放置更重要的功能控件(比如音乐播放器)时,往侧边栏放入页面切换逻辑是个不错的应对方案。本篇内容其实非常简单,主要就是介绍大家认识几个常用控件,不用调CSS,不用思考因为冒泡事件导致复杂的交互逻辑实现,这就是Flutter的魅力,简约而不简单,相信大家看过之后,自行开发APP的信心更足了,好勒,今天就到这里,感谢大家的支持,请关注我的Flutter圈子,多多投稿,也可以加入**flutter 中文社区(官方QQ群:338252156)**共同成长,谢谢大家~
flutter实战1:完成一个有侧边栏的主界面相关推荐
- Struts2项目实战 微云盘(六)主界面UI
一.本节说明 进入github下载本项目(开源) 本节实现的是主界面UI 二.AJAX请求 在使用Jquery前先确认正确的引入了jquery. 1.获取文件结点 当文档加载完成后需要获取到用户根目录 ...
- 闲来无事,仿了一个百度杀毒主界面
15号就去深圳找工作了,现在课程基本上上完了,但是有一个老师硬是要我们把实验搞完才能离开,这几天没事,画了两天仿了百度杀毒主界面,就一个窗口,第一次搞仿,和论坛里面的大神是没法比的. 里面还有很多东西 ...
- 跟着BOY学习开发cocos2d-x 游戏 实战篇(4)之 游戏主界面 -----怪物系统---赌徒来袭
兄弟们相比等这一章 等的时间比较长了吧!呵呵这几天公司的事情比较忙每天都只有晚上回来写会.所以进度慢了,不过兄弟们放心 我会坚持把这个游戏写完的写成一个可以买的游戏!哈哈 吹下牛了 其实在开发游戏的过 ...
- 初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap
自己也刚刚开始接触框架,在学习了bootstrap框架过后,练习写了一个简单的主界面,主界面的图如下: 这个页面主要用的bootstrap的栅格系统进行整体布局,网页效果简约大方,最重要的是比较简单吧 ...
- Android实战 - 音心音乐播发器 (主界面实现)
开发平台 : eclipse , ubuntu ,android sdk 4.0+ 1.背景 主页的设计从上往下依次是滚动广告(ViewFlipper ),分类信息( GridView ),热门榜单 ...
- 跟着BOY学习开发cocos2d-x 游戏 实战篇(6)之 游戏主界面 -----绚丽的魔法特效
在开始这一章之前我先说一个问题 ,最近群里的朋友问我,环境怎么配置我想说请看我的第一章的简介,一定要仔细看,还有那些只为把项目运行起来根本就不看代码的直接问问题 .一定要好好的看下代码,你可以按照自己 ...
- Flutter实战5 -- 天气查询APP重构之状态管理(ScopedModel)
0x00 前言 前面四篇文章: Flutter实战1 --- 写一个天气查询的APP Flutter实战2 --- 写一个天气查询的APP FFlutter实战3 --- PC上运行Flutter A ...
- Android ActionBar应用实战,高仿微信主界面的设计
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...
- Python 小白从零开始 PyQt5 项目实战(7)折叠侧边栏的实现
单式状态栏,位于于窗口的左右侧边,可以实现软件功能或目录的导航. 本文详细介绍用 QTreeWidget 部件实现目录结构的折叠侧边栏,与用 QToolBox 部件实现垂直菜单结构的折叠侧边栏,通过案 ...
最新文章
- 2021年大数据Flink(十一):流批一体API Source
- python--numpy pad函数使用
- Python入门100题 | 第006题
- 描述最常用的5种http方法的用途_对不起,来晚了,这可能是设计模式讲的最通俗易懂的文章(收藏)
- wxWidgets:wxMDIChildFrame类用法
- eovs实训报告总结心得_实训总结与心得体会3篇_心得体会
- 计算机等级delphi取消,计算机二级DELPHI控件:DELPHI过滤记录的实现方法
- 文本过滤后返回空值_利用Fiddler来Mock接口返回值
- 信息安全管理与评估_信息安全管理06_定性信息安全风险评估方法
- 机器学习全面教程无监督学习系列
- linux反向连接如何免密码,编写受密码保护的反向Shell(Linux x64)
- python链表操作_python操作链表的示例代码
- python一键扣图,5行Python代码一键视频抠图
- 网络管理员考试试题分类精解电子书
- typecho图片插件_Typecho 文章缩略图插件
- 软考_软件设计师_计算机组成与体系结构篇(8k字干货只为助力备考软考的你)
- 1.3. DIGITAL SIGNATURES数字签名
- iOSUILable边距设置
- excel快速填充_Excel教程:24秒,提取excel工作簿中300张图片
- linux ahci 不重装,老电脑竟然忘记开AHCI了,教你种不用重装系统的解决方法
热门文章
- spring学习-xml属性注入-数组--list--map--set类型
- android顶部标题app_name,如何写一个app通用的title
- 计算机专业课如何阅卷,全国计算机等级考试评卷老师是如何阅卷的?
- 企业付款php 接口,微信企业付款接口PHP开发需要注意的两个地方
- 电大考的是职称英语同计算机,最新电大统考计算机应用基础真题选择题详细分析小抄.doc...
- 街篮服务器维修时间,全新花式技能系统 《街头篮球》春节前夕版本上线
- 打印html文件都是空白页,我打印时的额外空白页面(IE中除外) – 是我的打印css吗?...
- linux文件乱码crt,Linux中文文件显示乱码或Secure CRT显示乱码解决方案
- android滚动悬停布局,android布局滑动到顶端悬浮,录音
- laravel架构判断id存在与否 存在进行什么操作_基于 Module 的 Laravel API 架构