Flutter新人實戰—從0開始開發一個DIY活動記錄應用（二）框架搭建

版權聲明：本文為本人原創文章，未經本人允許不得轉載。
廢話少說，今天開始我們就正式擼代碼實現這個小的應用。
由于我從事的是產品相關工作，所以對售前和用戶需求分析這塊比較多，我覺得擼代碼也好，做其他事也好，順序都是差不多的，先分析整體框架要包含哪些東西，然后進行架構布局，什么地方放什么東西，最后進行細節的實現，新人朋友們要特別注意不要想的太大，說要有這個那個的功能，這樣很容易離最初的需求和目標越來越遠，先把最基本的實現，然后再細化、添加、美化完善。

頁面結構分析

今天的主要任務是完成應用的整體框子搭建，先看下應用截圖：


首頁.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
項目持續更新中.......

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容