导航作为app开发想来都不陌生，在app的每一个页面几乎都离不开导航的影子，所以我们要封装一个自定义导航方便每一个页面的使用，导航一般都是左边返回、中间标题、右面保存等功能，下面就为大家 提供一个导航的实现，废话不多说直接上代码，大家可以直接ctrl+c和ctrl+v。
类名大家可以随便起，我这里是
TitleBar.dart这里我还使用了其他几个类，一个是颜色管理类，
ColorUtils.dart另一个字体尺寸类，
FontSizeUtils.dart一个是全局宏定义类，
DataBase.dart还有一个TitleBar对应点击事件的CallBack类，通过此类可以获取点击左右的点击事件
TitleBarCallBack.dart下面就每个类的内容，内容和上面类名保持一致
1、
import 'package:flutter/material.dart';
/*
* 设置APP内容所有颜色
* */
class ColorUtils {
// 白色
static const Color WHITE = Color(0xFFFFFFFF);
static const Color CLEAR = Color(0x00000000);
/**
* 以下设置所有文字颜色区域
*/
// 次要内容 Grey 灰色
static const Color TEXT_GRAY = Color(0xFF888888);
// 时间戳与表单缺省值 Light 灰色
static const Color TEXT_LIGHT_GRAY = Color(0xFFb2b2b2);
// 大段的说明内容而且属于主要内容用 Semi 黑
static const Color TEXT_SEMI_GRAY = Color(0xFF353535);
// tab背景色
static const Color TAB_UN_SELECT_BG = Color(0xFFEAEAEA);
// 阴影颜色
static const Color BOX_SHADOW = Color(0x1A000000);
/**
* 以下设置按钮颜色
*/
// DARK 正常颜色
static const Color DARK_BLUE_NORMAL = Color(0xFF576b95);
// DARK 按压颜色
static const Color DARK_BLUE_PRESS = Color(0x33576b95);
// DARK 禁止点击颜色
static const Color DARK_BLUE_DISABLE = Color(0x1A576b95);
// BLUE 正常颜色
static const Color BLUE_NORMAL = Color(0xFF0193f4);
// BLUE 按压颜色
static const Color BLUE_PRESS = Color(0x330193f4);
// BLUE 禁止点击颜色
static const Color BLUE_DISABLE = Color(0x1A0193f4);
// RED 正常颜色
static const Color RED_NORMAL = Color(0xFFe64340);
// RED 按压颜色
static const Color RED_PRESS = Color(0x33e64340);
// RED 禁止点击颜色
static const Color RED_DISABLE = Color(0x1Ae64340);
}
2、
/*
* 设置APP内容字号 单位：（pt）
* */
class FontSizeUtils {
static const double FONT_SIZE_40 = 40;
static const double FONT_SIZE_25 = 25;
static const double FONT_SIZE_20 = 20;
static const double FONT_SIZE_18 = 18;
static const double FONT_SIZE_17 = 17;
static const double FONT_SIZE_14 = 14;
static const double FONT_SIZE_13 = 13;
static const double FONT_SIZE_11 = 11;
}
3、
/**
* 全局宏
*/
class DataBase {
// 状态栏高度
static double STATUS_BAR_HEIGHT = 0;
// 底部安全区域高度
static double SAFE_AREA_BOTTOM_HEIGHT = 0;
// TOKEN
static String CLOUD_TOKEN = "";
/*
* 人员信息
**/
static String USER_ID = "";
static String USER_ACCOUNT = "";
static String USER_NAME = "";
static String USER_ORGID = "";
static String USER_TYPE = "";
/*
* 酒店ID
**/
static String HOTEL_ID = "";
/*
* 工单id
**/
static String WORK_ORDER_ID = "";
/*
* 房间ID
**/
static String ROOM_ID = "";
}
// jks密码shotel
4、
abstract class TitleBarCallBack{
void onLeftCallback();
void onRightCallback();
}
到此，就是这四个类的工具类的实现，这里前三个类，完全可以不用，之所以我这里使用，是因为项目需要方便管理，更改主题色以及字体大小等数据封装的全局类，方便统一修改。其实实现主要就是这两个类
TitleBar.dart
TitleBarCallBack.dart好了，下面就是主要代码了
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shotel/constant/DataBase.dart';
import 'package:shotel/util/ColorUtils.dart';
import 'package:shotel/util/FontSizeUtils.dart';
import 'package:shotel/util/callback/TitleBarCallBack.dart';
/**
* 全局统一头部导航栏
*/
class TitleBar extends StatefulWidget {
String leftTv = ""; // 左侧文字
String titleTv = ""; // 标题文字
String rightTv = ""; // 右侧文字
TitleBarCallBack callBack;
TitleBar(
{this.leftTv = "返回",
this.titleTv = "",
this.rightTv = "",
this.callBack,
Key key})
: super(key: key);
@override
_TitleBarState createState() => _TitleBarState();
}
class _TitleBarState extends State<TitleBar> {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
// image: DecorationImage(
// image: AssetImage("images/ic_titlebar_bg.png"),
// fit: BoxFit.cover,
// ),
color: Colors.white),
// 根据APP启动时获取的状态栏高度，进行处理
// 目的：iOS手机状态兰高度会影响scafold的界面显示
height: 54 + DataBase.STATUS_BAR_HEIGHT,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
margin: new EdgeInsets.only(top: DataBase.STATUS_BAR_HEIGHT),
child: Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
widget.callBack.onLeftCallback();
},
child: Container(
width: double.infinity,
height: double.infinity,
alignment: Alignment.center,
color: Colors.white,
child: Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
"images/ic_black_back.png",
width: 20,
height: 20,
),
Text(
widget.leftTv,
style: TextStyle(
color: ColorUtils.TEXT_SEMI_GRAY,
fontSize: FontSizeUtils.FONT_SIZE_17),
)
],
),
),
),
),
Expanded(
flex: 3,
child: Container(
alignment: Alignment.center,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
widget.titleTv,
style: TextStyle(
color: ColorUtils.TEXT_SEMI_GRAY,
fontSize: FontSizeUtils.FONT_SIZE_17),
)
],
),
),
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
widget.callBack.onRightCallback();
},
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.white,
alignment: Alignment.center,
child: Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
widget.rightTv,
style: TextStyle(
color: ColorUtils.TEXT_SEMI_GRAY,
fontSize: FontSizeUtils.FONT_SIZE_17),
)
],
),
),
),
),
],
),
),
),
Container(
height: 1,
width: double.infinity,
color: ColorUtils.TEXT_LIGHT_GRAY,
),
],
),
);
}
}
到此，就实现了导航的实现，因为Flutter没有向iOS一样可以通过Block一样的方式可以反向传值，所以Flutter都是通过CallBack类似于安卓的Interface
下面如何使用呢使用起来很简单，我们在下面这个类中实现
HostRestart.dart在下面方法中引用
@override
Widget build(BuildContext context) {
return CustomScaffold(
backgroundColor: ColorUtils.WHITE,
safeBottomColor: ColorUtils.WHITE,
contentWidget: Container(
width: double.infinity,
height: double.infinity,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
//此处就是使用位置，
TitleBar(
leftTv: "返回",
titleTv: "主机重启",
rightTv: "保存",
callBack: this,//这里就是自己传入CallBack，点击左右按键就会在当前类获取点击事件
),
],
),
),
);
}到此系统系统提示报错，因为我们还没有引入TitleBar、TitleBarCallBack类，那我们如何引入呢。
首先是TitleBar，我们只需要单击这个类，然后按住Alt+回车键这个时候就会有提示，按照提示（import）我们直接引入即可。
主要说一下TitleBarCallBack这个类
图中红色位置就是使用的位置，蓝色就是CallBack的名称，切记 implement 引用位置（这里说一下，蓝色框内的TitleBarCallBack可以理解为iOS里面的协议UITableViewDelegate，并不是引用包名）。
完成上面我们还是会提示报错，因为我们还没有个TitleBarCallBack引入包名路径，我们只需要鼠标单击到TitleBarCallBack上按住Alt+回车键这个时候就会有提示，按照提示（import）我们直接引入即可。
到这里就结束了吗，其实还没结束因为我们还没有在当前类实现TitleBarCallBack里面的两个方法，所以我们需要鼠标单击上图黄框中的中间位置按住Alt+回车键，按照提示（Creat）回车即可。
到此我们才实现了所有导航以及使用，说的可能很墨迹，但是使用很简单，希望对大家有所帮助
版权声明：本文为WangQingLei0307原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。