- 前言
- 属性
- 属性一览
- 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
当前版本 Flutter 3.19.5
前言
AppBarTheme用于定义AppBar的主题样式。是Material组件库中常用的顶部应用栏,它通常包含标题、操作按钮和其他相关内容。AppBarTheme允许您自定义AppBar的外观,包括标题样式、背景色、图标样式等。
属性
属性一览
- 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 ) )
...完结...
《Flutter入门: AppBarTheme详解》留言数:0