Flutter AppBar（顶端栏）

Posted 2023-05-15

参考技术A AppBar是一个顶端栏，对应着 android 的 Toolbar。

AppBar 有以下常用属性：

Flutter-AppBar

1.1 简介

AppBar “应用栏”

• 应用栏由工具栏组成，或者是工具栏和其他 widget 组合形成，例如 TabBar和FlexibleSpaceBar;
• 应用栏通常用于 Scaffold.appBar 属性，该属性将应用栏放置在屏幕顶部的固定高度小部件中;
• 对于可滚动的应用栏，请参阅SliverAppBar，它将AppBar嵌入 sliver 中以便在CustomScrollView中使用; 

1.2 基本用法

AppBar 主要属性：

• leading：
  如果省略了 leading ，但 AppBar 在带有 Drawer 的 Scaffold 中，则会插入一个 button 以打开 Drawer。如果没有Drawer ， 默认的是个返回箭头，可以通过设置来关闭automaticallyImplyLeading 为false ，
• automaticallyImplyLeading = true：
  如果有 leading 这个不会管用 ； 如果没有leading ，当有侧边栏的时候， false：不会显示默认的图片，true 会显示 默认图片，并响应打开侧边栏的事件
• title: 标题
• actions,右边的icon， 一般的是icon 或者是文字
• flexibleSpace, 在title上面的一个东西，一般无用
• bottom, 一般就是tabbar ， 也可以是别的
• elevation, Z轴高度，也就是阴影 默认是1 默认就是有高度 阴影的
• backgroundColor,导航栏的颜色 默认是 ThemeData 的颜色
• brightness,状态栏的深度 有白色和黑色两种主题
• iconTheme,
• centerTitle, title是否居中
• titleSpacing flexibleSpace 和 title 的距离 默认是重合的
• NavigationToolbar.kMiddleSpacing,
• toolbarOpacity = 1.0 导航栏的透明度
• bottomOpacity = 1.0 bottom的透明度