flutter 学习笔记之封装一个appbar

最新推荐文章于 2024-05-18 00:02:01 发布

原创最新推荐文章于 2024-05-18 00:02:01 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #appbar #自定义导航栏 #自定义appbar

学习笔记同时被 3 个专栏收录

23 篇文章

订阅专栏

flutter开发

14 篇文章

订阅专栏

UI控件封装

5 篇文章

订阅专栏

本文介绍了一个简单的Flutter自定义AppBar组件实现，支持标题、返回按钮、分割线等元素的自定义，包括背景颜色、标题样式及返回按钮图片的个性化设置。通过核心代码示例，展示了如何灵活地调整AppBar的外观和行为。

# flutter_appbar

封装一个简单的appbar,默认显示title和返回按钮和下面的分割线

- PreferredSizeWidget bottom 支持自定义bottom
- titleStyle 支持自定义title的风格
- backImgName 自定义返回按钮的图片
- backgroundColor 自定义导航栏颜色

核心代码：

 Widget build(BuildContext context) {
    return AppBar(
      title: new Text(
        widget.title ?? 'title',
        style: new TextStyle(
          color: Colors.black,
          fontSize: 17.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      leading: widget.isShowBack ?
      FlatButton(
        child: Image(
          image: new AssetImage('resources/base_navi_back@2x.png'),
          width: 9,
          height: 15,
        ),
        onPressed: () {
          Navigator.maybePop(context);
        },
      ) : null,
      backgroundColor: widget.backgroundColr ?? Colors.white,
      elevation: 0,
   
      bottom: new AppBarBottom(
        child: widget.bottom,
      ),
      actions: widget.actions,
    );
  }

源码：https://github.com/AnleSu/flutter_appbar