当前版本 Flutter 3.19.5

前言

AppBarTheme用于定义AppBar的主题样式。是Material组件库中常用的顶部应用栏，它通常包含标题、操作按钮和其他相关内容。AppBarTheme允许您自定义AppBar的外观，包括标题样式、背景色、图标样式等。

AppBarTheme API

属性

属性一览

• actionsIconTheme: 右侧actions图标主题
• backgroundColor: 定义AppBar的背景色
• centerTitle: 标题居中
• elevation: 阴影的大小，默认值为 4
• foregroundColor: 前景色
• iconTheme: 所有图标主题
• scrolledUnderElevation: 有其他组件在 AppBar 下面滚动时的高度
• shadowColor: 阴影颜色
• shape: AppBar 的形状，可以设置为圆形，圆角等
• surfaceTintColor: 通过改变 AppBar 的背景颜色来表明高度
• systemOverlayStyle 系统状态栏 和 底部虚拟栏颜色
• titleSpacing: title 水平的 padding
• titleTextStyle: title 中的 Text 的style
• toolbarHeight: AppBar 中的 toolbar 的高度
• toolbarTextStyle: AppBar 中的除 title以外 的 Text 的 TextStyle

actionsIconTheme: 右侧actions图标主题

覆盖所有Appbar小部件中Appbar.actionsicontheme的默认值。

实现

final IconThemeData? actionsIconTheme;

示例

AppBarTheme(
  actionsIconTheme: IconThemeData(
    color: Colors.red,
    size: 20,
    opacity: 0.5,
    fill: 1.0,
    weight: 2.0,
    grade: 3.0,
    opticalSize: 4.0,
    shadows: [
      Shadow(color: Colors.red, offset: Offset(1, 2), blurRadius: 3.0),
    ]
  ),
)

backgroundColor： 定义AppBar的背景色

实现

final Color? backgroundColor;

示例

AppBarTheme(
  backgroundColor: Colors.green,
)

centerTitle: 标题居中

覆盖所有AppBar.centerTitle属性的默认值。

实现

final bool? centerTitle;

示例

AppBarTheme(
  centerTitle: true,
)

elevation: 阴影的大小，默认值为 4

实现

final double? elevation;

示例

AppBarTheme(
  elevation: 0,
)

foregroundColor: 前景色

实现

final Color? foregroundColor;

示例

AppBarTheme(
  foregroundColor: Colors.red
)

iconTheme: 所有图标主题

实现

final IconThemeData? iconTheme;

示例

AppBarTheme(
  iconTheme: IconThemeData(
    color: Colors.blue,
    size: 50,
  )
)

scrolledUnderElevation: 有其他组件在 AppBar 下面滚动时的高度

实现

final double? scrolledUnderElevation;

示例

AppBarTheme(
  scrolledUnderElevation: 0.0, // 通过设置为 0.0 来禁用滚动下方的阴影
)

shadowColor: 阴影颜色

实现

final Color? shadowColor;

示例

AppBarTheme(
  elevation: 10,
  shadowColor: Colors.blue,
)

shape: AppBar 的形状，可以设置为圆形，圆角等

实现

final ShapeBorder? shape;

示例

AppBarTheme(
  elevation: 10,
  shape: StadiumBorder(),
)

surfaceTintColor: 通过改变 AppBar 的背景颜色来表明高度

ThemeData 中useMaterial3:true 才生效，设置后UI风格改变会很大。

实现

final Color? surfaceTintColor;

示例

AppBarTheme(
  surfaceTintColor: Colors.blue,
)

systemOverlayStyle 系统状态栏 和 底部虚拟栏颜色

在某些定制手机中可能会不生效

实现

final SystemUiOverlayStyle? systemOverlayStyle;

示例

AppBarTheme(
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarBrightness: Brightness.light //状态栏为亮色模式IOS使用
  )
)

titleSpacing: title 水平的 padding

实现

final double? titleSpacing;

示例

AppBarTheme(
  titleSpacing: 10.0
)

titleTextStyle: title 中的 Text 的style

实现

final TextStyle? titleTextStyle;

示例

AppBarTheme(
  titleTextStyle: TextStyle(
    color: Colors.red
  )
)

toolbarHeight: AppBar 中的 toolbar 的高度

当没有 bottom 时 等于 AppBar 的高度，当有 bottom 时，toolbarHeight 加上 bottom 的高度才是 appBar 的高度

实现

final double? toolbarHeight;

示例

AppBarTheme(
  toolbarHeight: 50,
)

toolbarTextStyle: AppBar 中的除 title以外 的 Text 的 TextStyle

目前就是 leading 和 actions 中的 TextStyle

实现

final TextStyle? toolbarTextStyle;

示例

AppBarTheme(
  toolbarTextStyle: TextStyle(
    color: Colors.red
  )
)

...完结...