版权声明：本文为本人原创文章，未经本人允许不得转载。
废话少说，今天开始我们就正式撸代码实现这个小的应用。
由于我从事的是产品相关工作，所以对售前和用户需求分析这块比较多，我觉得撸代码也好，做其他事也好，顺序都是差不多的，先分析整体框架要包含哪些东西，然后进行架构布局，什么地方放什么东西，最后进行细节的实现，新人朋友们要特别注意不要想的太大，说要有这个那个的功能，这样很容易离最初的需求和目标越来越远，先把最基本的实现，然后再细化、添加、美化完善。

页面结构分析

今天的主要任务是完成应用的整体框子搭建，先看下应用截图：

首页.PNG

尊崇Flutter的一切内容皆控件的思想，我们可以把这个页面进行解刨，页面主体有以下及部分组成：

1、 顶部AppBar，包含标题，图标按钮等
2、 中间内容展示区域，支持内容滚动
3、 底部导航栏BottomAppBar，包含两个图标按钮
4、 底部导航栏中间的FloatingActionButton

这样分析以后我们就可以很清晰的知道该如何布局了，如果你对flutter的基本布局有了解的话，我相信你很容易就可以把这个页面布局写出来，下面我撸码。

代码实现

关于代码建议

1. 很多新人包括我刚开始学的时候会在一个dart文件里撸很多代码，这是不好的习惯。就好比一个项目的文件记录，我们应该按照项目的阶段、项目文件的类型、项目状态等分门别类的存储管理，如果你把所有的文件都放在一个文件夹，时间一长大家都知道会是什么结果。所以养成好习惯，把不同实现部分代码分别写在不同文件里。
2. 新人朋友尽量多写注释，不然你看自己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

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

image.png

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控件，开始绘制我们想要的页面展示效果，下文见咯！！！

最后附上项目源码地址：https://gitee.com/xusujun33/activity_record_jia.git
项目持续更新中.......