Flutter 项目实战 02 AppBar 的二次封装使用

个人封装的 AppBar ,使用比较简单，不完善的地方，欢迎大家指点

废话不多说，直接上代码

import ‘package:flutter/material.dart’;

double abarHeight() {
return 48.0;
}

/*
*backAppbar可以返回一个只有标题和返回键的标题栏

• context 当前页面的对象
• title 当前页面的标题
• isLeading 可选的方法，默认为true，是否展示返回箭头
• tapFunc 可选方法，点击标题的时候触发
• actions 可选widget 标签，自定义右侧标签栏
  */
  backAppBar(BuildContext context, String title, {bool isLeading = true,Function tapFunc,Widget actions}) {
  return PreferredSize(
  preferredSize: Size.fromHeight(abarHeight()),
  child: new AppBar(
  elevation: 0,
  backgroundColor: Colors.white,
  leading: isLeading ? _leading(context) : null,
  title: new InkWell(
  child: new Text(
  title,
  style: TextStyle(
  fontSize: 20.0,
  color: Color(0xFF141E32),
  ),
  ),
  onTap: () {
  tapFunc();
  },
  ),
  actions: actions != null ? [
  Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
  actions,
  ],
  )
  ] : null,
  centerTitle: true,
  ));
  }

/*
*自定义返回图标

• context 当前对象
• backFunc 重写返回事件
  */
  _leading(BuildContext context, {Function backFunc}) {
  return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
  Container(
  width: 60,
  padding: EdgeInsets.all(0),
  child: new IconButton(
  // padding: EdgeInsets.only(left: 20.0, right: 20.0),
  icon: Image.asset(
  ‘images/back_left_arrow.png’,
  fit: BoxFit.contain,
  width: 20,
  height: 20,
  ),
  onPressed: () {
  if (backFunc == null) {
  _popNar(context);
  } else {
  backFunc();
  }
  }),
  ),
  ],
  );
  }

/*

• 默认返回至上一页
  */

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