設(shè)計給的效果如下：
UI布局圖
拿到設(shè)計后，先把整體拆分成幾個部分：
- “公共應(yīng)用欄”顽悼，可以給應(yīng)用程序中的大部分頁面使用的通用組件稍浆。
然后就可以開始進(jìn)行編碼了吐句。
第1步：繪制組件樹
簡單的應(yīng)用欄的組件樹.png
第2步：實(shí)現(xiàn)“公共應(yīng)用欄”
使用Flutter的應(yīng)用欄（AppBar）組件，你可以實(shí)現(xiàn)一些簡單定制效果挟阻。應(yīng)用欄（AppBar）組件亮度（brightness）屬性可以控制系統(tǒng)狀態(tài)欄的字體顏色琼娘，比如，如果你把背景顏色（backgroundColor）屬性設(shè)置成了淺色系附鸽，那么亮度（brightness）屬性應(yīng)該設(shè)置成明亮(light)的脱拼。
import 'package:flutter/material.dart';
/// 自定義的一級導(dǎo)航組件。
Widget FirstNavigation(String title, [IconButton iconButton]) => AppBar(
// 應(yīng)用欄（`AppBar`）組件的標(biāo)題（`title`）屬性坷备，應(yīng)用欄中的主要組件熄浓。
title: Text(
title,
style: TextStyle(
color: Color(0xFF282828),
fontSize: 18.0,
),
),
// 圖標(biāo)主題（`iconTheme`）屬性，用于應(yīng)用欄圖標(biāo)的顏色省撑、不透明度和大小赌蔑。
iconTheme: IconThemeData(
color: Color(0xFF4A4A4A),
),
// 亮度（`brightness`）屬性俯在，應(yīng)用欄（`AppBar`）組件的亮度。
brightness: Brightness.light,
// 背景顏色（`backgroundColor`）屬性娃惯，用于應(yīng)用欄（`AppBar`）組件的顏色跷乐。
backgroundColor: Color(0xFFF9F9F9),
// 中心標(biāo)題（`centerTitle`）屬性，標(biāo)題是否應(yīng)該居中趾浅。
centerTitle: true,
// 提高（`elevation`）屬性愕提，放置此應(yīng)用欄的z坐標(biāo)，可以控制應(yīng)用欄下方陰影的大小皿哨。
elevation: 0.0,
// 行動（`actions`）屬性揪荣，要在標(biāo)題后顯示的組件。
actions: <Widget>[
Container(
width: 90.0,
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 8.0),
decoration: BoxDecoration(
image: DecorationImage(
// 裝飾圖片（`DecorationImage`）類的圖片（`image`）屬性往史，將圖像繪制成裝飾仗颈。
// 通常通過資產(chǎn)圖片（`AssetImage`）使用隨應(yīng)用程序一起提供的圖像，
// 或通過網(wǎng)絡(luò)圖像（`NetworkImage`）使用從網(wǎng)絡(luò)獲取的圖像椎例。
image: AssetImage('assets/bg_right_texture.png'),
// 適應(yīng)屬性挨决，如何在框里展示圖像。
// https://docs.flutter.io/flutter/painting/BoxFit-class.html
fit: BoxFit.contain,
),
),
// 運(yùn)算符`??`订歪，表示如果為空脖祈。
child: iconButton ?? null,
),
],
);
第3步：還原效果
簡單的應(yīng)用欄的還原效果
