上一回 Flutter領(lǐng)航系列篇01 我們對Flutter進行了基本的介紹察蹲。
學了基礎(chǔ)控件Scaffold和Text，還學了一個無狀態(tài)組件StatelessWidget催训，通過這幾個組件構(gòu)建了一個應(yīng)用的基本界面洽议。
這一回我們接著上一回完善側(cè)邊抽屜界面，把導(dǎo)航加上漫拭，順便把導(dǎo)航玩兒出一點新花樣來亚兄。
1. 有/無狀態(tài)控件：
我們先簡單講下上回留下的控件狀態(tài)話題，讓大伙兒對控件狀態(tài)有個大致的印象采驻。
在Flutter中控件按狀態(tài)劃分审胚，可以分為兩類：
- StatelessWidget，表示無狀態(tài)的控件礼旅。
- 表示純展示型的控件
- 無狀態(tài)內(nèi)部必須有一個build函數(shù)膳叨，用來渲染UI
- 每一個項目必須有一個MaterialApp
- StatefulWidget，表示有狀態(tài)的控件
- 打個比方痘系，如果需要私有數(shù)據(jù)菲嘴，例如:
請求返回的數(shù)據(jù)，那就需要聲明有狀態(tài)的控件
- 打個比方痘系，如果需要私有數(shù)據(jù)菲嘴，例如:
按照這個分法汰翠，大伙兒可以看出來咱們目前代碼繼承的是無狀態(tài)控件龄坪。
好，咱們先熱熱身复唤，敲個小代碼：
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {}
)
],
把這段代碼健田，加入AppBar()。
按下R鍵刷新一下佛纫，可以看到界面的右上角出現(xiàn)了一個搜索小圖標妓局，挺有意思吧。
2. 抽屜界面：
接下來呈宇，咱們把上回的抽屜界面（drawer）完善一下跟磨。
這里我們需要講細一點：
- listView控件：往drawer()里加入listView控件
- children屬性：listview里有一個children屬性，是一個控件數(shù)組攒盈，布局元素就放在這個數(shù)組里邊兒。
- UserAccountsDrawerHeader控件：
- 這里我們可以選擇往children控件數(shù)組里邊兒放入UserAccountsDrawerHeader()控件哎榴。
- UserAccountsDrawerHeader()控件里邊兒有兩個必填屬性：accountEmail型豁、accountName
- 如果有頭像需求僵蛛，還可以選擇加入一個currentAccountPicture屬性，如果頭像需要是圓形的迎变，那么代碼如下：
currentAccountPicture：CircleAvatar(
backgroundImage: NetworkImage('[https://qcloud.dpfile.com/pc/bMbudG0HNlcgJ9mCH9uT_KG-8Lkov5fWOq0Vw93525g-OrTcCi-L0gXpZGLYEEcFTYGVDmosZWTLal1WbWRW3A.jpg](https://qcloud.dpfile.com/pc/bMbudG0HNlcgJ9mCH9uT_KG-8Lkov5fWOq0Vw93525g-OrTcCi-L0gXpZGLYEEcFTYGVDmosZWTLal1WbWRW3A.jpg)')
)充尉，
這里一一解釋一下：
- CircleAvatar：表示圓形頭像
- backgroundImage：背景圖
- NetworkImage：表示是網(wǎng)絡(luò)圖片，這里我在網(wǎng)上隨便找了張圖
這個時候大家不妨運行試試看衣形，可以看到效果如下：
avatar
目前的背景是藍色驼侠，若是期望再加個背景圖的話，可以再加一段兒背景圖谆吴。
代碼如下：
decoration: BoxDecoration(
image: DecorationImage(
fix: BoxFix.cover,
image: NetworkImage('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3672957379,325248742&fm=26&gp=0.jpg')
)
),
- decoration 屬性對當前控件的做裝飾美化的倒源，他有一個BoxDecoration盒子裝飾器，這里邊兒的image就是背景圖片句狼。
- fit 屬性是控制填充模式的笋熬，BoxFix.cover 讓圖片適配到容器邊緣。
如果不明白腻菇，注釋掉胳螟，對比一下效果就知道了。
好啦筹吐，這個時候糖耸，我們接著加入ListTitle()控件，代碼如下：
ListTile(title: Text('我喜歡的'), trailing: Icon(Icons.favorite)),
ListTile(title: Text('我收藏的'), trailing: Icon(Icons.fastfood)),
Divider(),
ListTile(title: Text('個人信息'), trailing: Icon(Icons.face))
- ListTile 控件就是每一項丘薛，trailing看英文意思也知道是后面的項嘉竟，icon組件就不用說了吧。
- Divider 看英文意思也知道是分割線啦榔袋。
3. 小Tips：
- 大家可以看到左上角時間6：35那個地方周拐，是留白的。
如果不想留白的話凰兑，可以往child: ListView()里邊兒放一段兒
padding:EdgeInsets.all(0)妥粟，
這里padding的參數(shù)不能是數(shù)值，不能像前端寫css一樣直接padding:0 - 加了背景圖之后吏够，可以看到字是黑色的勾给，效果不太明顯」可以在text組件里調(diào)整顏色播急，例如：
var color = TextStyle(color: Colors.white);
UserAccountsDrawerHeader(accountEmail: Text('data@data.com', style: color),accountName: Text('飛狐', style: color),
側(cè)邊欄
整體代碼如下:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var color = TextStyle(color: Colors.white);
var avatar = 'https://qcloud.dpfile.com/pc/bMbudG0HNlcgJ9mCH9uT_KG-8Lkov5fWOq0Vw93525g-OrTcCi-L0gXpZGLYEEcFTYGVDmosZWTLal1WbWRW3A.jpg';
var bgImage = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3672957379,325248742&fm=26&gp=0.jpg';
return MaterialApp(
title: '南帝',
theme: ThemeData(primarySwatch: Colors.lightBlue),
home: Scaffold(
appBar: AppBar(
title: Text('北丐'),
actions: <Widget>[
IconButton(icon: Icon(Icons.search),onPressed: () {})
],
),
body: Center(child: Text('中神通')),
floatingActionButton: FloatingActionButton(onPressed: () {},child: Text('東邪')),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.all(0),
children: <Widget>[
UserAccountsDrawerHeader(accountEmail: Text('data@data.com', style: color),accountName: Text('飛狐', style: color),
currentAccountPicture:
CircleAvatar(backgroundImage: NetworkImage(avatar)),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(bgImage)
)
),
),
ListTile(title: Text('我喜歡的'), trailing: Icon(Icons.favorite)),
ListTile(title: Text('我收藏的'), trailing: Icon(Icons.fastfood)),
Divider(),
ListTile(title: Text('個人信息'), trailing: Icon(Icons.face))
],
)
),
),
);
}
}
側(cè)邊欄就告一段落啦，接下來售睹，我們開始寫導(dǎo)航欄
4. 底部導(dǎo)航前奏-代碼拆分
底部的導(dǎo)航實現(xiàn)其實挺簡單桩警。不過在寫導(dǎo)航之前，咱得先改下結(jié)構(gòu)昌妹。
目的是把 home 控件拎出來捶枢，使其獨立成一個類握截，代碼如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '周伯通',
theme: ThemeData(primarySwatch: Colors.lightBlue),
home: MyHomePage()
);
}
}
class MyHomePage extends StatelessWidget {
// 省略Scaffold的代碼咯...
}
可以看到，主要就兩個步驟：
- 新寫一個 MyHomePage 類
- 把 Scaffold 拆分過去
5. 底部導(dǎo)航實現(xiàn)
底部導(dǎo)航的實現(xiàn)有3個動作：
- 新增底部導(dǎo)航區(qū)域控件（bottomNavigationBar）烂叔，步驟如下：
- 位置放置與 drawer 控件同級
- 新增 Container 容器
- 往 Container 容器里添加 decoration 修飾容器谨胞，比如背景色
- 高度屬性 height
- child 屬性為 TabBar 組件
- 新增 DefaultTabController，步驟如下：
- 把 Scaffold 控件作為子節(jié)點賦值給 child
- 同時增加一個 length 屬性蒜鸡，該屬性值表示導(dǎo)航欄的 item 項長度胯努，如下：
DefaultTabController(length: 5, child: Scaffold())
- body 屬性改為 TabBarView，放置的就是內(nèi)容層
至此逢防，整個完成叶沛，代碼如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '周伯通',
theme: ThemeData(primarySwatch: Colors.lightBlue),
home: MyHomePage()
);
}
}
class MyHomePage extends StatelessWidget {
var color = TextStyle(color: Colors.white);
var avatar = 'https://qcloud.dpfile.com/pc/bMbudG0HNlcgJ9mCH9uT_KG-8Lkov5fWOq0Vw93525g-OrTcCi-L0gXpZGLYEEcFTYGVDmosZWTLal1WbWRW3A.jpg';
var bgImage = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3672957379,325248742&fm=26&gp=0.jpg';
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
title: Text('北丐'),
actions: <Widget>[
IconButton(icon: Icon(Icons.search),onPressed: () {})
],
),
body: TabBarView(
children: <Widget>[
Text('金融'),
Text('醫(yī)療'),
Text('中間'),
Text('量化'),
Text('我的')
],
),
floatingActionButton: FloatingActionButton(onPressed: () {}, child: Text('東邪')),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.all(0),
children: <Widget>[
UserAccountsDrawerHeader(accountEmail: Text('data@data.com', style: color),accountName: Text('飛狐', style: color),
currentAccountPicture:
CircleAvatar(backgroundImage: NetworkImage(avatar)),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(bgImage)
)
),
),
ListTile(title: Text('我喜歡的'), trailing: Icon(Icons.favorite)),
ListTile(title: Text('我收藏的'), trailing: Icon(Icons.fastfood)),
Divider(),
ListTile(title: Text('個人信息'), trailing: Icon(Icons.face))
],
)
),
bottomNavigationBar: Container(
decoration: BoxDecoration(color: Colors.lightBlue),
height: 60,
child: TabBar(
labelStyle: TextStyle(height: 0.5, fontSize: 12),
tabs: <Widget>[
Tab(icon: Icon(Icons.memory), text: '醫(yī)療'),
Tab(icon: Icon(Icons.money_off), text: '金融'),
Tab(icon: Icon(Icons.add_circle, size: 52, color: Colors.white)),
Tab(icon: Icon(Icons.high_quality), text: '量化'),
Tab(icon: Icon(Icons.my_location), text: '我的')
],
),
),
),
);
}
}
大家可以運行看看，導(dǎo)航部分效果如下：
導(dǎo)航欄
6. 小彩蛋-底部導(dǎo)航凹凸效果
有些APP，導(dǎo)航欄中間部分是有凹凸效果的，其實也不難實現(xiàn)匆瓜。
飛狐在這里把部分代碼給大家演示一下涯肩，具體封裝成一個很好的控件就是個細活兒了。
替換 bottomNavigationBar，代碼如下：
bottomNavigationBar: BottomAppBar(
child: SizedBox(
height: 60,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(child: Tab(icon: Icon(Icons.memory), text: '醫(yī)療',), flex: 1),
Expanded(child: Tab(icon: Icon(Icons.money_off), text: '金融',), flex: 2,),
Expanded(child: Tab(icon: Icon(Icons.high_quality), text: '量化',), flex: 2),
Expanded(child: Tab(icon: Icon(Icons.my_location), text: '我的',), flex: 1),
],
),
),
shape: CircularNotchedRectangle(),
color: Colors.lightBlueAccent,
),
關(guān)鍵點，shape 就是凹陷代碼部分。
還沒完约巷，接著把 floatingActionButton 部分代碼替換如下：
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),
關(guān)鍵點，floatingActionButtonLocation 讓浮動圖標居中至導(dǎo)航欄中部旱捧。
好啦独郎，大家刷新看效果吧。
導(dǎo)航欄凹凸效果
這一回我們講的控件有點多枚赡，難度適中氓癌，需要小伙伴兒們好好消化一下。
復(fù)盤一下贫橙，這一回我們實現(xiàn)了區(qū)分了組件狀態(tài)贪婉，抽屜界面，導(dǎo)航欄卢肃。
下一篇我們會講到內(nèi)容列表的實現(xiàn)疲迂。
好啦，下回見莫湘。
