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<Widget> actions Widget集合 app_bar.png

AppBar( title: Text('AppBarTitle'), backgroundColor: Colors.green, actions: <Widget>[ 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: <Widget>[ 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: <Widget>[ 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: <Widget>[ 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: <Widget>[ 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: <Widget>[ 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: <Widget>[ 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: <Widget>[ 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: <Widget>[ 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: <Widget>[ 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<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( physics: const BouncingScrollPhysics(), slivers: <Widget>[ SliverAppBar( stretch: false, onStretchTrigger: () { // Function callback for stretch return; }, pinned: true, expandedHeight: 300.0, flexibleSpace: FlexibleSpaceBar( stretchModes: <StretchMode>[ 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>[ 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设置渐变色背景