
最近用的很好的Appbar工具类分享一下
下面是方法名意思
1.backAppbar 仅含 左侧返回按钮 及中间标题 2.baseNoBackAppbar 仅含 及中间标题
3.baseRTextAppbar backAppbar 仅含 左侧返回按钮 及中间标题 右边是文字比如(确定按钮)
4.baseRImageAppbar仅含 左侧返回按钮 及中间标题 右边是图片比如(确定按钮)
5.baseRWidgetAppbar 仅含 左侧返回按钮 及中间标题 右边自定义view
调用(这个特殊怕你们不会)
appBar: BaseAppbar().baseRWidgetAppbar(context,Constants.tuwenVxTitle,[ 方法名 ]),
6.baseCRWidgetAppbar自定义 左侧返回按钮 中间自定义view 右边自定义view
appBar: BaseAppbar().baseCRWidgetAppbar(context,
Container(里面的不写了哈哈
),
[
] ),
/
import 'package:flutter/material.dart';
import 'package:flutter_mvp/app/application.dart';
import 'package:flutter_mvp/utils/dio/constants/constants.dart';
/**
* flutter 自定义 backAppbar
*/
typedef _CallBack = void Function();
class BaseAppbar {
/**
* 仅含 左侧返回按钮 及中间标题
* appBar: TitleBar().backAppbar(context, '个人资料'),
*/
_CallBack callback;
backAppbar(BuildContext context, String title,{VoidCallback onPressed}) {
return PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
leading: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10), // 设置边距
child: Image.asset(Constants.imagePath +"base_titlebar_back.png",
width:30,height: 30,
),
)),
),
);
}
baseNoBackAppbar(BuildContext context, String title) {
return PreferredSize(
preferredSize: Size.fromHeight(48),
child: AppBar(
elevation: 0, //默认是4, 设置成0 就是没有阴影了
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
));
}
/**
* 自定义AppBar右边是标题
*/
baseRTextAppbar(BuildContext context,String title,String rtitle, {Null Function() callback}) {
return PreferredSize(
preferredSize: Size.fromHeight(48),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
leading:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10), // 设置边距
child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
),
)),
actions: [
GestureDetector(
onTap: (){
if(callback!=null){
callback();
}
},
child: Container(
padding: EdgeInsets.only(right: 10),
alignment: Alignment.center,
child: Text(
rtitle,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w400, //字体宽度。
),
),
),
),
]));
}
/**
* 自定义AppBar右边两个图片
*/
baseRImageAppbar(BuildContext context,String title,String rimageStr, {Null Function() callback}) {
return PreferredSize(
preferredSize: Size.fromHeight(48),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
leading:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10), // 设置边距
child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
),
)),
actions: [
GestureDetector(
onTap: () {
if (callback != null) {
callback();
}
},
child: Container(
padding: EdgeInsets.only(right: 10),
child: Image.asset(rimageStr,
width: Constants.appBarBackSize),
),
)
]));
}
/**
* 自定义AppBar 右边自定义view
*/
baseRWidgetAppbar(BuildContext context,String title, List childWidget) {
return PreferredSize(
preferredSize: Size.fromHeight(48),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
leading:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10), // 设置边距
child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
),
)),
actions: childWidget));
}
/**
* 自定义AppBar 中间自定义view 右边自定义view
*/
baseCRWidgetAppbar(BuildContext context,Widget centerWidget, List childWidget) {
return PreferredSize(
preferredSize: Size.fromHeight(48),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: centerWidget,
leading:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10), // 设置边距
child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
),
)),
actions: childWidget));
}
/**
* 关闭页面
*/
_popThis(BuildContext context){
Navigator.of(context).pop();
}
}
下面是调用代码
appBar: BaseAppbar().baseNoBackAppbar(context, '111'),
appBar: BaseAppbar().baseRImageAppbar(context,serchStr, Constants.imagePath+"base_titlebar_add.png",callback: () {
写自己的方法
}),
这里只写2个调用方法
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)