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

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

推薦閱讀更多精彩內容