Flutter新人实战—从0开始开发一个DIY活动记录应用(二)框架搭建

96
走路不穿鞋oO
1.5 2018.11.02 13:56* 字数 1502

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

页面结构分析

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


首页.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

这样做的目的是将应用页面代码和应用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控件,开始绘制我们想要的页面展示效果,下文见咯!!!

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

Flutter 从入门到入土
Web note ad 1