Flutter自定义导航栏AppBar

有点坑的leading

我在项目中遇到这样一个问题，设置appBar的 leading的时候报错，我定义的leading widget结构如下图红框中所示:

image.png

然而报错、报错一直报错，大致错误日志是超出多少像素，我依次减少红框中文字的字符数，报错log中提示的超出数量越来越小，看起来像是leading被限制了宽度？
flutter是开源的，这真是极好的，点进去看看...

class AppBar extends StatefulWidget implements PreferredSizeWidget 
AppBar({
    Key key,
    this.leading,
)}

直接看重点位置,即创建leading的位置

Widget leading = widget.leading;
    if (leading == null && widget.automaticallyImplyLeading) {
      if (hasDrawer) {
        leading = IconButton(
          icon: const Icon(Icons.menu),
          onPressed: _handleDrawerButton,
          tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
        );
      } else {
        if (canPop)
          leading = useCloseButton ? const CloseButton() : const BackButton();
      }
    }
    if (leading != null) {
// 注意此处，leading被设置为一个最大宽度 _kLeadingWidth，看起来我们的猜测是正确的。
      leading = ConstrainedBox(
        constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),
        child: leading,
      );
    }

那么 _kLeadingWidth又是什么多少?依次寻找往下点

const double _kLeadingWidth = kToolbarHeight; // So the leading button is square.


/// The height of the toolbar component of the [AppBar].
const double kToolbarHeight = 56.0;

很明显，leading被限制了最宽56，那么默认的AppBar很明显无法满足我的需求，so，自定义走起。

自定义AppBar

上面的代码中可以看到,AppBar只是实现了 PreferredSizeWidget接口

class AppBar extends StatefulWidget implements PreferredSizeWidget 

那么我们也可以从这进行入手，自定义一个实现了 PreferredSizeWidget的Widget
具体代码并不多，比你想象的简单，直接上代码，

import 'package:flutter/material.dart';

/// 这是一个可以指定SafeArea区域背景色的AppBar
/// PreferredSizeWidget提供指定高度的方法
/// 如果没有约束其高度，则会使用PreferredSizeWidget指定的高度

class CustomAppbar extends StatefulWidget implements PreferredSizeWidget {
  final double contentHeight; //从外部指定高度
  Color navigationBarBackgroundColor; //设置导航栏背景的颜色
  Widget leadingWidget;
  Widget trailingWidget;
  String title;
  CustomAppbar({
    @required this.leadingWidget,
    @required this.title,
    this.contentHeight = 44,
    this.navigationBarBackgroundColor = Colors.white,
    this.trailingWidget,
  }) : super();

  @override
  State createState() {
    return new _CustomAppbarState();
  }

  @override
  Size get preferredSize => new Size.fromHeight(contentHeight);
}

/// 这里没有直接用SafeArea，而是用Container包装了一层
/// 因为直接用SafeArea，会把顶部的statusBar区域留出空白
/// 外层Container会填充SafeArea，指定外层Container背景色也会覆盖原来SafeArea的颜色
///     var statusheight = MediaQuery.of(context).padding.top;  获取状态栏高度

class _CustomAppbarState extends State {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: widget.navigationBarBackgroundColor,
      child: new SafeArea(
        top: true,
        child: new Container(
            decoration: new UnderlineTabIndicator(
              borderSide: BorderSide(width: 1.0, color: Color(0xFFeeeeee)),
            ),
            height: widget.contentHeight,
            child: new Stack(
              alignment: Alignment.center,
              children: [
                Positioned(
                  left: 0,
                  child: new Container(
                    padding: const EdgeInsets.only(left: 5),
                    child: widget.leadingWidget,
                  ),
                ),
                new Container(
                  child: new Text(widget.title,
                      style: new TextStyle(
                          fontSize: 17, color: Color(0xFF333333))),
                ),
                Positioned(
                  right: 0,
                  child: new Container(
                    padding: const EdgeInsets.only(right: 5),
                    child: widget.trailingWidget,
                  ),
                ),
              ],
            )),
      ),
    );
  }
}

引用的地方:

appBar: new CustomAppbar(
          title: '日历',
          leadingWidget: leftBarButtonItemWidget(),
          trailingWidget: rightBarButtonItemsWidget(),
        )

leftBarButtonItemWidget() rightBarButtonItemsWidget()两个方法是我自定义的导航栏按钮，实现自己需要的即可。值得说的是，可以将leadingWidget设置为非@required的，在自定义的AppBar里面做好处理即可,另外在上面的代码中并没有限制导航栏上每个Widget所占用的最大空间，如果你的导航栏子组件可能很宽，提前进行妥善处理是个好主意。