深入了解Flutter核心Widget（一）——App Bar

见解分享

2024-02-12 02:22:36

App Bar——应用顶部的导航栏

App Bar是Flutter中非常重要的一个Widget，它位于应用顶部的导航栏，主要用于显示应用的标题，以及一些常用的操作按钮。App Bar的设计遵循Material Design规范，因此它具有统一的外观和交互方式。

App Bar的组成部分

一个App Bar由一个工具栏和一些其他潜在的widget组成，如TabBar和FlexibleSpaceBar。

工具栏

工具栏是App Bar中最主要的部分，它包含了应用的标题以及一些常用的操作按钮。工具栏的背景颜色通常与应用的主色调一致，并且在顶部有一条分隔线。

TabBar

TabBar是一个用于在不同页面之间切换的widget，它通常位于工具栏的下方。TabBar可以包含多个选项卡，每个选项卡对应一个页面。当用户点击某个选项卡时，相应的页面就会被加载。

FlexibleSpaceBar

FlexibleSpaceBar是一个可以随着用户滚动而改变其大小的widget，它通常位于工具栏的后面。FlexibleSpaceBar可以包含一些额外的信息，如图片、视频或文本。当用户滚动页面时，FlexibleSpaceBar会随着滚动而收缩或展开。

App Bar的使用方式

App Bar的使用非常简单，只需要在你的代码中添加以下代码即可：

AppBar(
  title: Text('App Bar Title'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Do something
      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        // Do something
      },
    ),
  ],
);