
上QQ阅读APP看书,第一时间看更新
3.2.3 AppBar
AppBar显示在App的顶部,AppBar结构如图3-16所示。

图3-16 AppBar结构
AppBar属性参见表3-13。
表3-13 AppBar属性

左侧为返回按钮,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所示。

图3-17 AppBar效果