版權聲明:本文為本人原創文章,未經本人允許不得轉載。
廢話少說,今天開始我們就正式擼代碼實現這個小的應用。
由于我從事的是產品相關工作,所以對售前和用戶需求分析這塊比較多,我覺得擼代碼也好,做其他事也好,順序都是差不多的,先分析整體框架要包含哪些東西,然后進行架構布局,什么地方放什么東西,最后進行細節的實現,新人朋友們要特別注意不要想的太大,說要有這個那個的功能,這樣很容易離最初的需求和目標越來越遠,先把最基本的實現,然后再細化、添加、美化完善。
頁面結構分析
今天的主要任務是完成應用的整體框子搭建,先看下應用截圖:
尊崇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
這樣做的目的是將應用頁面代碼和應用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,
),
);
}
}
這時候我們打開模擬器或者接上手機跑起來看看效果,如果開發不是為了看到效果那將毫無意義不是嘛,帶給我們快樂的不是代碼,而是代碼轉換成的界面效果:
我們親手寫的第一個頁面就這樣誕生了,是不是很簡單很激動。
下面我們繼續添加底部中間的按鈕,繼續修改home_page.dart
我們需要用到Scaffold下的floatingActionButton屬性,
添加以下代碼:
floatingActionButton: new FloatingActionButton(
onPressed: () {},
child: new Icon(Icons.add),
),
這時候來體驗下flutter的核心功能熱重載,我們點擊AS上方的閃電圖標
屏幕右下角新增了一個圓形的按鈕圖標:
但是這個位子并沒有像開頭應用預覽那樣在底部導航欄的中間上面,所以需要繼續修改對應的屬性,這次用到Scaffold下的floatingActionButtonLocation,浮動按鈕位置
添加以下代碼:
floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,
熱重載以后如下圖:
發現一個問題:按鈕把之前中間的圖標擋住了
針對這個問題我們通過修改
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控件,包含兩個圖標按鈕,并讓他們頭尾擺放,除了頭尾,還有平均擺放等其他方式,比如以下幾種效果:
至此首頁的幾部布局和結構我們就弄完了。
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
,這里我就不寫了,以后的文章會有涉及到。下面看下進入新頁面的效果:
本文總結
1、掌握基本的頁面由scaffold構成,里面可以包含標題欄,導航欄,浮動按鈕等,當然還包括以后會用到的滑動標題欄,底部菜單導航,左側劃出菜單等等。
2、學會如何從一個頁面導航到新的頁面,并返回到之前的頁面。
3、了解了橫向布局控件Row的基本使用,掌握了他子控件的排列方式。
下篇我將開始介紹Flutter眾多的UI控件,開始繪制我們想要的頁面展示效果,下文見咯?。?!
最后附上項目源碼地址:https://gitee.com/xusujun33/activity_record_jia.git
項目持續更新中.......