废话少说，今天开始我们就正式撸代码实现这个小的应用。
由于我从事的是产品相关工作，所以对售前和用户需求分析这块比较多，我觉得撸代码也好，做其他事也好，顺序都是差不多的，先分析整体框架要包含哪些东西，然后进行架构布局，什么地方放什么东西，最后进行细节的实现，新人朋友们要特别注意不要想的太大，说要有这个那个的功能，这样很容易离最初的需求和目标越来越远，先把最基本的实现，然后再细化、添加、美化完善。
页面结构分析
今天的主要任务是完成应用的整体框子搭建，先看下应用截图：
首页.PNG
尊崇Flutter的一切内容皆控件的思想，我们可以把这个页面进行解刨，页面主体有以下及部分组成：
1、 顶部AppBar，包含标题，图标按钮等
2、 中间内容展示区域，支持内容滚动
3、 底部导航栏BottomAppBar，包含两个图标按钮
4、 底部导航栏中间的FloatingActionButton
这样分析以后我们就可以很清晰的知道该如何布局了，如果你对flutter的基本布局有了解的话，我相信你很容易就可以把这个页面布局写出来，下面我撸码。
代码实现
关于代码建议
- 很多新人包括我刚开始学的时候会在一个dart文件里撸很多代码，这是不好的习惯。就好比一个项目的文件记录，我们应该按照项目的阶段、项目文件的类型、项目状态等分门别类的存储管理，如果你把所有的文件都放在一个文件夹，时间一长大家都知道会是什么结果。所以养成好习惯，把不同实现部分代码分别写在不同文件里。
- 新人朋友尽量多写注释，不然你看自己5天前写的可能都不知道自己为什么这么写了。所以后面的分项我可能会把主要的内容点和遇到的问题描述一下，其他我基本都会通过注释描述。
1.新建项目并修改main.dart
import 'package:flutter/material.dart';
import 'package:activity_record/pages/home_page.dart';
void main() => runApp(new MyApp());//main函数是程序的主入口
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//返回一个material规范的app
return new MaterialApp(
title: 'Activity Record',//这个title是你打开任务管理器的时候显示的名字
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new HomePage(),
);
}
}
2.在lib目录下新建pages，并新建home_page.dart
pages.png
这样做的目的是将应用页面代码和应用ui代码分离，使应用整体代码结构整洁清晰。
我们继续编辑
home_page.dart，内容如下：
import 'package:flutter/material.dart';
/*
这是首页，包含标题栏、底部导航栏和浮动按钮
因为
*/
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
final _title = '活动展示'; //appBar标题，前置下划线表示该成员变量类内可见
@override
Widget build(BuildContext context) {
return new Scaffold(
//标题栏，包含一个标题和一个图标按钮
appBar: new AppBar(
title: new Text(_title),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.face), onPressed: () {})
],
),
body: new Center(
child: new Text('这是首页内容展示区域'),
),
bottomNavigationBar: new BottomAppBar(
child: new Icon(Icons.favorite),
//color: Theme.of(context).primaryColor,
),
);
}
}
这时候我们打开模拟器或者接上手机跑起来看看效果，如果开发不是为了看到效果那将毫无意义不是嘛，带给我们快乐的不是代码，而是代码转换成的界面效果：
image.png
我们亲手写的第一个页面就这样诞生了，是不是很简单很激动。
下面我们继续添加底部中间的按钮，继续修改home_page.dart
我们需要用到Scaffold下的floatingActionButton属性，
添加以下代码：
floatingActionButton: new FloatingActionButton(
onPressed: () {},
child: new Icon(Icons.add),
),
这时候来体验下flutter的核心功能热重载，我们点击AS上方的闪电图标
image.png
，屏幕右下角新增了一个圆形的按钮图标：
image.png
但是这个位子并没有像开头应用预览那样在底部导航栏的中间上面，所以需要继续修改对应的属性，这次用到Scaffold下的floatingActionButtonLocation，浮动按钮位置
添加以下代码：
floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,热重载以后如下图：
image.png
发现一个问题：按钮把之前中间的图标挡住了
针对这个问题我们通过修改
bottomNavigationBar解决：
bottomNavigationBar: new BottomAppBar(
child: Row(
//将横布局下的子控件按照头尾的方式摆放
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new IconButton(
icon: new Icon(Icons.favorite),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.format_line_spacing),
onPressed: () {},
)
],
),
),
以上代码在BottomAppBar中添加一个横向Row控件，包含两个图标按钮，并让他们头尾摆放，除了头尾，还有平均摆放等其他方式，比如以下几种效果：
spaceBetween.png
spaceEvenly.png
spaceAround.png
至此首页的几部布局和结构我们就弄完了。
3.添加第二个页面，用于新增diy活动记录
在pages目录下新建diy_add_dialog.dart这个文件我们用来显示新增diy活动记录的内容。内容输入我们在后面介绍，这次还是像绘制首页那样把基本结构先弄出来。代码如下：
/*
diy活动新增页面
涉及用户输入所以继承自状态可变的StatefulWidget
采用全屏对话框的形式展现
*/
class DiyAddDialog extends StatefulWidget{
@override
DiyAddDialogState createState() => new DiyAddDialogState();
}
class DiyAddDialogState extends State<DiyAddDialog>{
final _title = '新增活动';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(_title),
),
body: new Center(
child: new Text('这是新增活动页面'),
),
);
}
}
新增活动的页面也有了，但是我们现在还无法进入这个页面，这时候就要用到flutter的路由导航管理器了。
4.配置从首页按钮点击后进入到新增活动页面的路由导航
我们回到home_page，找到floatingActionButton，修改他的点击事件，代码如下：
floatingActionButton: new FloatingActionButton(
onPressed: () {
Navigator.of(context).push(
new MaterialPageRoute(builder: (context) {
return new DiyAddDialog();
}),
);
},
child: new Icon(Icons.add),
),
以上代码中Navigator就是flutter的导航管理器，他负责导航路由的入栈（push）和出栈（pop），我们通过默认路由返回新增活动页面的对象，就可以进入到新增页面了。
热重载后，我们在首页点击浮动按钮，就可以顺利进入到新的页面了，新页面默认左上角会有返回按钮，如果我们想通过自己点击按钮返回也可以通过配置路由出栈实现，代码就是上面的Navigator.of(context).push改成Navigator.of(context).pop，这里我就不写了，以后的文章会有涉及到。下面看下进入新页面的效果：
进入新页面.gif
本文总结
1、掌握基本的页面由scaffold构成，里面可以包含标题栏，导航栏，浮动按钮等，当然还包括以后会用到的滑动标题栏，底部菜单导航，左侧划出菜单等等。
2、学会如何从一个页面导航到新的页面，并返回到之前的页面。
3、了解了横向布局控件Row的基本使用，掌握了他子控件的排列方式。
下篇我将开始介绍Flutter众多的UI控件，开始绘制我们想要的页面展示效果，下文见咯！！！
网友评论