flutter自定义appbar

- 日理万妓 2021-06-06 15:21 664阅读 0赞

#### 场景描述： ####

因为写很多页面，每个顶部都搞一个返回键、分享，中间标题这种东东，弄的比较繁琐，索性就把这个`appbar`给单独抽离出来，重新定义成一个`widget`这个内容。

> 效果图大致是这样子的：

![在这里插入图片描述][20190818150638579.png]

#### 源码： ####

直接上代码：

import 'package:flutter/material.dart';
    import 'package:/common_utils/common_utils.dart';
    import 'package:/resources/mycolor_resources.dart';
    import 'package:/routers/application.dart';
    
    class HeadTitleBar extends StatefulWidget implements PreferredSizeWidget { 
      final String text; //从外部指定内容
      final Color statusBarColor; //设置statusbar的颜色
      final double contentHeight = 80.0;
      final bool rightShow;
      final VoidCallback callback;
    
      HeadTitleBar({ 
        this.text,
        this.statusBarColor,
        this.rightShow,
        this.callback,
      }) : super();
    
      @override
      State<StatefulWidget> createState() { 
        return new _HeadTitleBarState(this.callback);
      }
    
      @override
      Size get preferredSize => new Size.fromHeight(contentHeight);
    }
    
    ///这里没有直接用SafeArea，而是用Container包装了一层
    ///因为直接用SafeArea，会把顶部的statusBar区域留出空白
    ///外层Container会填充SafeArea，指定外层Container背景色也会覆盖原来SafeArea的颜色
    class _HeadTitleBarState extends State<HeadTitleBar> { 
      VoidCallback callback;
    
      _HeadTitleBarState(this.callback);
    
      @override
      Widget build(BuildContext context) { 
        return new Container(
          color: Colors.white,
          height: widget.contentHeight,
          child: SafeArea(
            top: true,
            child: Container(
                child: Column(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      InkWell(
                        onTap: () { 
                          Application.router.pop(context);
                        },
                        child: Container(
                          child: Icon(
                            Icons.arrow_back_ios,
                            color: Colors.black,
                          ),
                          width: 40,
                        ),
                      ),
                      Text(
                        "${widget.text}",
                        style: TextStyle(
                            color: MyColorRes.titleBarColor, fontSize: 16),
                      ),
                      widget.rightShow
                          ? GestureDetector(
                              child: Container(
                                child: Image.asset(
                                  Util.getImgPath('ic_more'),
                                  width: 24,
                                  height: 20,
                                ),
                                margin: EdgeInsets.only(right: 15),
                              ),
                              onTap: this.callback,
                            )
                          : Container(
                              width: 24,
                            ),
                    ],
                  ),
                ),
                Container(
                  height: 0.5,
                  color: MyColorRes.divideLine,
                ),
              ],
            )),
          ),
        );
      }
    }

--------------------

[20190818150638579.png]: /images/20210529/7186ac7ce6fb4e2a93e76c1cb7df5b89.png