flutter标题栏Appbar的封装

设置标题栏高度PreferredSize

的Flutter的标题栏通常使用AppBar, 但是AppBar并没有提供设置高度的参数, 需要使用PreferredSize包裹appbar, 并设置preferredSize属性

设置appbar中的控件

通过leading和actions属性设置左右的控件
通过title指定标题栏的控件
通过centerTitle指定默认标题栏的位置, 默认Android上是false, 默认偏左

自由设置appbar中子控件的大小

在appbar中如何单独给定一个RaiseButton或者Text, 无法设置大小, 需要外部包裹一层Column, 然后在children里面使用Container去自由设定大小, 一个返回左侧leading的例子(‘assets/images/ic_black_left_arrow.png’:左侧的返回图片):

_leading(BuildContext context, {Function backFunc}) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        width: adapt(41),
        padding: EdgeInsets.all(0),
        child: new IconButton(
          padding: EdgeInsets.only(left: adapt(10), right: adapt(20)),
          icon: Image.asset(
            'assets/images/ic_black_left_arrow.png',
            fit: BoxFit.contain,
            width: adapt(11),
            height: adapt(18),
          ),
          onPressed: () {
            if (backFunc == null) {
              _popThis(context);
            } else {
              backFunc();
            }
          },
        ),
      ),
    ],
  );
}

一个扩展性很强的标题栏工具

backAppbar可以返回一个只有标题和返回键的标题栏
backActionAppbar可以返回一个有左侧back和和自定义action的标题栏
baseAppbar可以对左侧leading和右侧action更好的自定义

import 'package:flutter/material.dart';

double adapt(double w) {
  return w;
}

backAppbar(BuildContext context, String title, {Function tapFunc}) {
  return PreferredSize(
      preferredSize: Size.fromHeight(adapt(48)),
      child: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        leading: _leading(context),
        title: InkWell(
          child: Text(
            title,
            style: TextStyle(fontSize: 18, color: Color(0xFF000000)),
          ),
          onTap: () {
            tapFunc();
          },
        ),
        centerTitle: true,
      ));
}

backActionAppbar(BuildContext context, String title, Widget action, {Function backFunc}) {
  return PreferredSize(
      preferredSize: Size.fromHeight(adapt(48)),
      child: AppBar(
        elevation: 0,
        leading: _leading(context, backFunc: backFunc),
        title: InkWell(
          child: Text(
            title,
            style: TextStyle(fontSize: 18, color: Color(0xFF000000)),
          ),
        ),
        centerTitle: true,
        actions: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              action,
            ],
          ),
        ],
      ));
}

baseAppbar(BuildContext context, String title, Widget leading, Widget action) {
  return PreferredSize(
      preferredSize: Size.fromHeight(adapt(48)),
      child: AppBar(
        elevation: 0,
        leading: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            leading
          ],
        ),
        title: InkWell(
          child: Text(
            title,
            style: TextStyle(fontSize: 18, color: Color(0xFF000000)),
          ),
        ),
        centerTitle: true,
        actions: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              action,
            ],
          ),
        ],
      ));
}

_leading(BuildContext context, {Function backFunc}) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        width: adapt(41),
        padding: EdgeInsets.all(0),
        child: new IconButton(
          padding: EdgeInsets.only(left: adapt(10), right: adapt(20)),
          icon: Image.asset(
            'assets/images/ic_black_left_arrow.png',
            fit: BoxFit.contain,
            width: adapt(11),
            height: adapt(18),
          ),
          onPressed: () {
            if (backFunc == null) {
              _popThis(context);
            } else {
              backFunc();
            }
          },
        ),
      ),
    ],
  );
}

void _popThis(BuildContext context) {
  if (Navigator.of(context).canPop()) {
    Navigator.of(context).pop();
  }
}