Flutter 导航栏AppBar
恢弘志士之气，不宜妄自菲薄。——诸葛亮
People of noble ambition should not belittle themselves. zhugeliang
以上效果是谷歌团队创建的AppBar最初版,经典呀!!!
[知乎]听 Flutter 创始人 Eric 为你讲述 Flutter 的故事
AppBar
App 应用
Bar 条
简称 应用导航条
final Widget title 标题 app_bar.png
AppBar(title: Text('AppBarTitle'),)
final bool centerTitle 标题居中 app_bar.png
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.lightBlue, centerTitle: true, )
final Color backgroundColor 背景颜色 app_bar.png
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.red, )
final List
actions Widget集合 app_bar.png AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.green, actions:[ IconButton(icon: const Icon(Icons.add),), IconButton(icon: const Icon(Icons.clear),), IconButton(icon: const Icon(Icons.arrow_drop_down),), ], )
final double elevation 阴影大小(Z轴方向) app_bar.png
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.red, actions:[ IconButton(icon: const Icon(Icons.add),), IconButton(icon: const Icon(Icons.clear),), IconButton(icon: const Icon(Icons.arrow_drop_down),), ], elevation: 50, ) AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.red, actions:[ IconButton(icon: const Icon(Icons.add),), IconButton(icon: const Icon(Icons.clear),), IconButton(icon: const Icon(Icons.arrow_drop_down),), ], elevation: 0, )
final ShapeBorder shape 边框形状 app_bar.png
/ 圆角/
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.greenAccent, elevation: 4, shape: RoundedRectangleBorder( side: BorderSide.none, borderRadius: BorderRadius.only( bottomLeft: Radius.circular(50.0), bottomRight: Radius.circular(30.0))), actions:[ IconButton( icon: const Icon(Icons.add), ), IconButton( icon: const Icon(Icons.clear), ), IconButton( icon: const Icon(Icons.arrow_drop_down), ), ], )
/斜角/
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.greenAccent, elevation: 4, shape: BeveledRectangleBorder( side: BorderSide.none, borderRadius: BorderRadius.only( bottomLeft: Radius.circular(20.0), bottomRight: Radius.circular(20.0))), actions:[ IconButton( icon: const Icon(Icons.add), ), IconButton( icon: const Icon(Icons.clear), ), IconButton( icon: const Icon(Icons.arrow_drop_down), ), ], )
final PreferredSizeWidget bottom 底部widgetapp_bar.png
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.lightBlue, elevation: 4, actions:[ IconButton( icon: const Icon(Icons.add), ), IconButton( icon: const Icon(Icons.clear), ), IconButton( icon: const Icon(Icons.arrow_drop_down), ), ], centerTitle: true, bottom: PreferredSize(child: Text('AppBarBottom')), )
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.lightBlue, elevation: 4, actions:[ IconButton( icon: const Icon(Icons.add), ), IconButton( icon: const Icon(Icons.clear), ), IconButton( icon: const Icon(Icons.arrow_drop_down), ), ], centerTitle: true, bottom: PreferredSize(child: Text('AppBarBottom'),preferredSize: Size.fromHeight(100.0)) )
final Widget flexibleSpace 弹性空间app_bar.png
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.lightBlue, elevation: 4, actions:[ IconButton( icon: const Icon(Icons.add), ), IconButton( icon: const Icon(Icons.clear), ), IconButton( icon: const Icon(Icons.arrow_drop_down), ), ], centerTitle: true, flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: const Text('Flight Report'), ), bottom: PreferredSize(child: Text('AppBarBottom'), preferredSize: Size.fromHeight(50.0)))
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.lightBlue, elevation: 4, actions:[ IconButton( icon: const Icon(Icons.add), ), IconButton( icon: const Icon(Icons.clear), ), IconButton( icon: const Icon(Icons.arrow_drop_down), ), ], centerTitle: true, flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: const Text('Flight Report'), ), bottom: PreferredSize(child: Text('AppBarBottom'),preferredSize: Size.fromHeight(200.0)))
final Widget leading 靠前widget
AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.lightBlue, leading: Builder(builder: (BuildContext context){ return IconButton(icon: Icon(Icons.menu), onPressed: null); },), elevation: 4, actions:[ IconButton( icon: const Icon(Icons.add), ), IconButton( icon: const Icon(Icons.clear), ), IconButton( icon: const Icon(Icons.arrow_drop_down), ), ], centerTitle: true, flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: const Text('Flight Report'), ), bottom: PreferredSize(child: Text('AppBarBottom'),preferredSize: Size.fromHeight(100.0))),
App导航栏悬浮 app_bar_pinned.mp4 app_bar.mp4
class _MyHomePageState extends State{ @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( physics: const BouncingScrollPhysics(), slivers: [ SliverAppBar( stretch: false, onStretchTrigger: () { // Function callback for stretch return; }, pinned: true, expandedHeight: 300.0, flexibleSpace: FlexibleSpaceBar( stretchModes: [ StretchMode.zoomBackground, StretchMode.blurBackground, StretchMode.fadeTitle, ], centerTitle: true, title: const Text('Flight Report'), background: Stack( fit: StackFit.expand, children: [ Image.network( 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg', fit: BoxFit.cover, ), const DecoratedBox( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment(0.0, 0.5), end: Alignment(0.0, 0.0), colors: [ Color(0x60000000), Color(0x00000000), ], ), ), ), ], ), ), ), SliverList( delegate: SliverChildListDelegate([ ListTile( leading: Icon(Icons.wb_sunny), title: Text('Sunday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Sunday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Sunday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Sunday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Sunday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), ListTile( leading: Icon(Icons.wb_sunny), title: Text('Monday'), subtitle: Text('sunny, h: 80, l: 65'), ), // ListTiles++ ]), ), ], ), ); } }
参考：
Flutter 基础Widgets之AppBar详解
Flutter 来实现一个渐变色的 AppBar
Flutter之AppBar属性分析
Flutter AppBar设置渐变色背景