Flutter 之 AppBar 这样的骚操作你知道吗？

最新推荐文章于 2025-05-11 07:23:59 发布

原创

最新推荐文章于 2025-05-11 07:23:59 发布 · 置顶 · 6.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #前端 #跨平台 #Android #ios

本文介绍了如何在 Flutter 中自定义 AppBar，特别是在启动页设置用户头像并实现点击头像打开侧滑栏的功能。通过分析官方文档和源码，文章详细解析了两种实现方式，包括手动处理头像点击事件与侧滑栏的联动，以及修改源码以保留AppBar的自动关联功能。最后，作者分享了更多Flutter开发技巧，邀请读者一起交流。

好久不见了，这阵子在忙公司的项目，加班比较严重，这周终于抽了点时间来帮国外一家公司做一款跨平台的 App。由于去年九月份在上海参加过 Google 举办的 Google develop days，受益颇多，特别在其目前正在大力热推的 Flutter 框架。相比于目前热门的跨平台框架 React Native，Flutter在 UI 绘制以及性能方便不遑多让。因此，这款 app 打算基于 Dart 语言，并采用 Flutter 框架来完成。

花了大概几天时间熟悉了下 Dart 语法和 Flutter 基本组成控件，就开始摸索着做一个练手项目。AppBar 想必大家都用过，当其处于启动页时是隐藏的，而处于其他页面时左边默认携带来返回按钮。目前，我们的需求是：首页的 AppBar 最左边为用户头像，点击用户头像可以自动打开左侧抽屉栏。

最终效果图如下所示：

效果图

初学者一开始总是痛苦的，还好，解决问题的途径“万变不离其宗”。我们先来查看一下 Flutter 官方文档发现，要使用 AppBar来操作页面，决定其左边点击事件的属性就是 leading ：

AppBar({
Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
Widget flexibleSpace,
PreferredSizeWidget bottom,
double elevation,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
TextTheme textTheme,
bool primary: true,
bool centerTitle,
double titleSpacing: NavigationToolbar.kMiddleSpacing,
double toolbarOpacity: 1.0,
double bottomOpacity: 1.0
})

可以看到，我们 AppBar 中的 leading 属性是一个 Widget 类型，那么它接收的参数范围就很广了，换句话说，我们可以直接将一个按钮传递给它，并在 onPressed 方法中处理左边侧滑栏的开启和关闭状态。?，有思路了咱们久开始试验一下：

 final GlobalKey<ScaffoldState> _scaffoldKey = new 													GlobalKey();
 
 @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
        lengt