[flutter专题]详解AppBar小部件

• 应用栏布局

• 自定义 AppBar

Flutter 中的 AppBar 是什么？

---

Flutter AppBar 是根据Material Design指南构建的应用程序组件。它通常位于屏幕顶部，并且能够在其布局中包含其他小部件。AppBar 通常显示品牌信息，例如徽标和标题，并且通常包含按钮或其他用户交互点。

以下是 Flutter 中默认的 AppBar 的样子：

// Mostly, AppBar is used inside a Scaffold widget.

Scaffold(

appBar: AppBar(),

),

应用栏布局

---

在Flutter中，AppBar的布局主要包括三个组成部分：leading，title，和actions。leading放置在AppBar的最左边位置；title并actions出现在它的右边。

leading

leading 接受一个小部件，可以分配任何东西——文本、图标，甚至一行中的多个小部件。

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 {

@o