flutter封装AppBar

flutter封装AppBar

最近做flutter项目,为了更简洁,封装了AppBar组件,不过不是自定义组件哈,只不过页面头部样式都基本一致,为了减少代码,基于原生的AppBar做了个小封装,现将代码分享给大家!

//appbar,顶部标题页面
import 'package:flutter/material.dart';

class TopAppBar extends AppBar {
  TopAppBar(
  BuildContext context, //上下文,必须
  String titleName,//页面标题,必须
      {
        bool isCenterTitle = true,//是否中间居中,默认中间居中,参数可选
        final actions,//右边部分,可能存放图标,文字等,可能还有点击事件,参数可选
        final backIcon=const Icon(Icons.arrow_back_ios,color: Colors.grey,),//左边返回箭头图标,默认是<,可自定义,,参数可选也可以是文字
        final String rightText='',//右边文字,参数可选
        final rightCallback,//右边文字或者图标的点击函数,参数可选
      })
      : super(
    title: Text(titleName),
    leading: IconButton(
        icon:backIcon,
        onPressed: () => Navigator.of(context).pop()
    ),
    centerTitle: isCenterTitle,
    actions: <Widget>[
      Padding(
        padding: EdgeInsets.only(right: 10.0),
        child:Center(
          child: GestureDetector(
            onTap:(){
              rightCallback();
            },
            child: Text(rightText),
          ),
        ),
      ),
    ],
  );
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值