flutter 自定义 Appbar

flutter 自定义 Appbar,第1张

最近用的很好的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个调用方法

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/990439.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存