简介

如果没有特殊的需要，就直接用Scaffold的AppBar是最方便的。看起来很简单的，实际做起来实在是麻烦不断。
由于要完成UI的尺寸要求，只能自己自己用Container自己画，折腾了好几次。

高度

按照设计图的尺寸来做，直接给了90。这个高度在刘海屏是可以的，但是在普通屏幕，就太大了。

企业微信截图_a8ab5005-df9b-41e2-b5c7-7e5d26a324b7.png

后来采用导航栏+状态栏高度的方式来动态决定

    final MediaQueryData data = MediaQuery.of(context);
    EdgeInsets padding = data.padding;
    double statusHeight = padding.top;
    final double navigationHeight = 44;
    double appBarHeight = statusHeight + navigationHeight;

状态栏statusHeight在刘海屏返回44，普通的返回20；导航栏navigationHeight固定为44

返回按钮

左侧的返回按钮，除了首页之外，几乎都要，那么干脆就直接放上去。
至于首页那种没有返回按钮的，当做一种特殊种类来处理。
那种左边有两个按钮的那种特殊情况，也暂时不考虑。

class BackWidget extends StatelessWidget {
  const BackWidget({
    Key? key,
    this.margin,
  }) : super(key: key);

  final EdgeInsetsGeometry? margin;

  /// 导航栏高度固定为44
  final double _height = 44;

  /// icon本身为22 * 22，两边各留10的空间
  final double _width = 10 + 22 + 10;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        Get.back();
      },
      child: Container(
        color: Colors.transparent,
        height: _height,
        width: _width,
        margin: margin,
        child: Center(
          child: Image.asset(
            R.assetsImgAppBarBack,
            fit: BoxFit.contain,
            color: const Color(0xFF333333),
          ),
        ),
      ),
    );
  }
}

右侧按钮

大多数情况是右侧无按钮，像这样的；这种情况用一个宽15的SizedBox占位就可以了

企业微信截图_c92682b3-0293-40b6-9e47-de6b3bf1cc61.png

较多的情况是有一个按钮，像这样的

企业微信截图_1749d324-a046-4a59-95ff-b1707deaf1aa.png

一个按钮的话就放一个Container中，左右放一定的padding就可以了

关于图标

不使用Flutter提供的IconData，临时用上的都过不了UI审查，都需要使用UI提供的切图；
这里的切图尺寸，统一为22 * 22的；
垂直方向，一般在44高的导航栏区中就可以了；
图标左右两边都会留10左右的padding；
为了方便点击，可以把42 * 44的Container作为点击区域，图标居中显示就可以了；

中间文本

一个居中文本的情况是最多的
少部分啥也没有
少数情况会有两行文本
文本的字体和颜色，大多数时候都可以固定；

分层处理

用一个Stack处理文本居中问题;
文本放在最底层，居中；
向右按钮，其他中间试图，右侧视图放在一层;

Stack(
  children: [
    /// 文本需要整个容器居中，所以另外放一层
    Positioned(
      left: 42,
      right: 42,
      child: Visibility(
        visible: ((type == NavigationBarType.singleText) ||
            (type == NavigationBarType.twoText)),
        child: childWiget,
      ),
    ),

    /// 返回按钮，其他中间视图，右侧视图放一层
    /// 右侧按钮居多，所以这里也提供点击响应
    Positioned(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Visibility(
            visible: isShowBack,
            child: const BackWidget(),
          ),
          Visibility(
            visible: ((type != NavigationBarType.singleText) &&
                (type != NavigationBarType.twoText)),
            child: Expanded(
              child: childWiget,
            ),
          ),
          Visibility(
            visible: (rightWidget != null),
            replacement: SizedBox(width: 15.w),
            child: GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                if (onRightClick != null) {
                  onRightClick!();
                }
              },
              child: Container(
                color: Colors.transparent,
                height: 44,
                padding: EdgeInsets.only(left: 10.w, right: 15.w),
                child: rightWidget,
              ),
            ),
          ),
        ],
      ),
    ),
  ],
)