[flutter专题]详解AppBar小部件

leading: Icon(Icons.account_circle_rounded),

),

您可以控制leading可以占用多少宽度：

AppBar(

leading: Icon(Icons.account_circle_rounded),

leadingWidth: 100, // default is 56

),

如果leading未提供，AppBar 会自动为我们暗示。示例包括返回上一页的导航箭头或打开抽屉的菜单图标。

当上一条路线可用时，导航箭头会自动出现。

class HomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: TextButton(

child: Text(‘Push’),

onPressed: () => Navigator.push(context, MaterialPageRoute(

builder: (context) {

return SecondPage();

},

)),

),

),

);

}

}

class SecondPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(),

);

}

}

当我们将 添加Drawer到Scaffold时 ，会分配一个菜单图标leading来打开抽屉。

class HomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(),

drawer: Drawer(),

);

}

}

如果需要，可以通过设置automaticallyImplyLeadingfalse来防止这种行为。

AppBar(

automaticallyImplyLeading: false, // simple as that!

),

title

顾名思义，它主要用于显示标题，例如应用程序标题或页眉。

AppBar(

title: Text(‘Profile Page’),

),

但您不仅限于此，因为也title需要一个小部件。您可以使用它来显示图标、图像、形状或使用布局小部件（例如row和 ）的任意组合column。

下面是一个例子：

AppBar(

title: Container(

width: 40,

child: Image.network(url),

),

),

默认情况title下，根据 Material 指南与 AppBar 的左侧对齐。您可以更改此设置以使其居中对齐：

AppBar( title: Container( width: 40, child: Image.network(url), ), centerTitle: true, // like this!),

actions

actions是与 AppBar 右侧对齐的小部件列表。我们通常在用作按钮的应用程序中看到它们来触发下拉菜单、个人资料头像等。

AppBar( actions: [ Icon(Icons.more_vert), ],),

让我们再向列表中添加一个小部件：

AppBar( actions: [ Container( width: 30, child: Image.asset( ‘assets/images/profile_pic.png’, ), ), Icon(Icons.more_vert), ],),

在 Flutter 中自定义 AppBar

---

现在我们熟悉了 AppBar 的布局，让我们通过使用主题选项将自定义提升到一个新的水平。AppBar 包含各种属性，包括颜色、大小、图标主题、文本主题等等。

背景颜色

以下代码将 AppBar 的背景颜色更改为深橙色。500添加以访问颜色的特定阴影，900即最暗和最亮50。

AppBar( backgroundColor: Colors.deepOrange[500],),

图标主题

下面的代码将图标的颜色更改为绿色，将大小更改为36：

AppBar( actionsIconTheme: IconThemeData(color: Colors.green, size: 36),),

《设计思想解读开源框架》

第一章、 热修复设计

• 第一节、 AOT/JIT & dexopt 与 dex2oat

• 第二节、 热修复设计之 CLASS_ISPREVERIFIED 问题

• 第三节、热修复设计之热修复原理

• 第四节、Tinker 的集成与使用（自动补丁包生成）

  

  第二章、 插件化框架设计

• 第一节、 Class 文件与 Dex 文件的结构解读

• 第二节、 Android 资源加载机制详解

• 第三节、 四大组件调用原理

• 第四节、 so 文件加载机制

• 第五节、 Android 系统服务实现原理

  

  第三章、 组件化框架设计

• 第一节、阿里巴巴开源路由框——ARouter 原理分析

• 第二节、APT 编译时期自动生成代码&动态类加载

• 第三节、 Java SPI 机制

• 第四节、 AOP&IOC

• 第五节、 手写组件化架构

  

  第四章、图片加载框架

• 第一节、图片加载框架选型

• 第二节、Glide 原理分析

• 第三节、手写图片加载框架实战

  

  第五章、网络访问框架设计

• 第一节、网络通信必备基础

• 第二节、OkHttp 源码解读

• 第三节、Retrofit 源码解析

  

  第六章、 RXJava 响应式编程框架设计

• 第一节、链式调用

• 第二节、 扩展的观察者模式

• 第三节、事件变换设计

• 第四节、Scheduler 线程控制

  

  第七章、 IOC 架构设计

• 第一节、 依赖注入与控制反转

• 第二节、ButterKnife 原理上篇、中篇、下篇

• 第三节、Dagger 架构设计核心解密

  

  第八章、 Android 架构组件 Jetpack

• 第一节、 LiveData 原理

• 第二节、 Navigation 如何解决 tabLayout 问题

• 第三节、 ViewModel 如何感知 View 生命周期及内核原理

• 第四节、 Room 架构方式方法

• 第五节、 dataBinding 为什么能够支持 MVVM

• 第六节、 WorkManager 内核揭秘

• 第七节、 Lifecycles 生命周期

  
  本文包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
  

196684)]

第八章、 Android 架构组件 Jetpack

• 第一节、 LiveData 原理

• 第二节、 Navigation 如何解决 tabLayout 问题

• 第三节、 ViewModel 如何感知 View 生命周期及内核原理

• 第四节、 Room 架构方式方法

• 第五节、 dataBinding 为什么能够支持 MVVM

• 第六节、 WorkManager 内核揭秘

• 第七节、 Lifecycles 生命周期

  [外链图片转存中…(img-YhLDjJQp-1720103196684)]
  本文包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
  [外链图片转存中…(img-05XRVSzb-1720103196684)]