設(shè)計給的效果如下：

UI布局圖

拿到設(shè)計后，先把整體拆分成幾個部分：

1. “公共應(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)用欄的還原效果