flutter自定义appbar

最新推荐文章于 2025-03-31 11:56:46 发布

xudailong_blog

最新推荐文章于 2025-03-31 11:56:46 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter开发文章标签： flutter自定义appbar flutter自定义顶部内容 flutter开发 flutter实战

本文链接：https://blog.youkuaiyun.com/xudailong_blog/article/details/99704819

本文介绍了如何在Flutter中自定义AppBar，以简化多个页面顶部内容的重复创建。内容包括自定义返回键、分享和中间标题的功能，并提供了详细的源码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景描述：

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

效果图大致是这样子的：

在这里插入图片描述

源码：

直接上代码：

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