![Flutter实战入门](https://wfqqreader-1252317822.image.myqcloud.com/cover/55/32436055/b_32436055.jpg)
上QQ阅读APP看书,第一时间看更新
3.2.3 AppBar
AppBar显示在App的顶部,AppBar结构如图3-16所示。
![](https://epubservercos.yuewen.com/E5359F/17517093106688906/epubprivate/OEBPS/Images/t3-16-i.jpg?sign=1738851706-ziEebH4OAwzVjVBmWVmfcDLSKzCMRovB-0-151db839ad1bdf06ebdbe538b1ab489b)
图3-16 AppBar结构
AppBar属性参见表3-13。
表3-13 AppBar属性
![](https://epubservercos.yuewen.com/E5359F/17517093106688906/epubprivate/OEBPS/Images/b3-13-i.jpg?sign=1738851706-vefO21lm7Jlwc4kqVtzvh5qvLYUpIyAl-0-f395ecf9f0baad5b7d32ee65a3e93f74)
左侧为返回按钮,title是“Flutter实战入门”,右侧有3个图标,代码如下:
Scaffold( appBar: AppBar( leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}), title: Text('Flutter 实战入门'), actions: <Widget>[ IconButton(icon: Icon(Icons.add), onPressed: () {}), IconButton(icon: Icon(Icons.dashboard), onPressed: () {}), IconButton(icon: Icon(Icons.cached), onPressed: () {}), ], ), )
运行效果如图3-17所示。
![](https://epubservercos.yuewen.com/E5359F/17517093106688906/epubprivate/OEBPS/Images/t3-17-i.jpg?sign=1738851706-5wsiqgbu0S3dxukJnSiEe010zm9jttzu-0-ce83abbb93b7cff6647761c890f019c9)
图3-17 AppBar效果