Flutter布局锦囊---简单的应用栏

设计给的效果如下：

UI布局图

拿到设计后，先把整体拆分成几个部分：

1. “公共应用栏”，可以给应用程序中的大部分页面使用的通用组件。

然后就可以开始进行编码了。

第1步：绘制组件树

简单的应用栏的组件树.png

第2步：实现“公共应用栏”

使用Flutter的应用栏（AppBar）组件，你可以实现一些简单定制效果。应用栏（AppBar）组件亮度（brightness）属性可以控制系统状态栏的字体颜色，比如，如果你把背景颜色（backgroundColor）属性设置成了浅色系，那么亮度（brightness）属性应该设置成明亮(light)的。

import 'package:flutter/material.dart';

/// 自定义的一级导航组件。
Widget FirstNavigation(String title, [IconButton iconButton]) => AppBar(
  // 应用栏（`AppBar`）组件的标题（`title`）属性，应用栏中的主要组件。
  title: Text(
    title,
    style: TextStyle(
      color: Color(0xFF282828),
      fontSize: 18.0,
    ),
  ),
  // 图标主题（`iconTheme`）属性，用于应用栏图标的颜色、不透明度和大小。
  iconTheme: IconThemeData(
    color: Color(0xFF4A4A4A),
  ),
  // 亮度（`brightness`）属性，应用栏（`AppBar`）组件的亮度。
  brightness: Brightness.light,
  // 背景颜色（`backgroundColor`）属性，用于应用栏（`AppBar`）组件的颜色。
  backgroundColor: Color(0xFFF9F9F9),
  // 中心标题（`centerTitle`）属性，标题是否应该居中。
  centerTitle: true,
  // 提高（`elevation`）属性，放置此应用栏的z坐标，可以控制应用栏下方阴影的大小。
  elevation: 0.0,
  // 行动（`actions`）属性，要在标题后显示的组件。
  actions: [
    Container(
      width: 90.0,
      alignment: Alignment.centerRight,
      padding: const EdgeInsets.only(right: 8.0),
      decoration: BoxDecoration(
        image: DecorationImage(
          // 装饰图片（`DecorationImage`）类的图片（`image`）属性，将图像绘制成装饰。
          // 通常通过资产图片（`AssetImage`）使用随应用程序一起提供的图像，
          // 或通过网络图像（`NetworkImage`）使用从网络获取的图像。
          image: AssetImage('assets/bg_right_texture.png'),
          // 适应属性，如何在框里展示图像。
          // https://docs.flutter.io/flutter/painting/BoxFit-class.html
          fit: BoxFit.contain,
        ),
      ),
      // 运算符`??`，表示如果为空。
      child: iconButton ?? null,
    ),
  ],
);

第3步：还原效果

简单的应用栏的还原效果