Flutter 顶部导航 AppBar 的实现

Flutter 实现 AppBar 功能

---

我们知道，Android 中 Material 布局。只要是在 Material 中使用 AppBar 控件，即可实现 导航条的功能。

AppBar 的属性

想要使用 AppBar 这个 Widget 组件，首先要了解它的属性：

  AppBar({
    Key key,
    this.leading,//导航栏左侧的 Widget，例如常见的 back 图标。
    this.automaticallyImplyLeading = true,//如果 leading!=null，该属性不生效；如果 leading==null 并且该属性为 true，左侧 leading 区域留白（占位）；如果 leading==null 且该属性为 false，左侧 leading 区域扩展给 title 区域使用。
    this.title,//导航栏的标题
    this.actions,//List<Widget>类型，导航栏右侧要展示的一组 widgets
    this.flexibleSpace,
    this.bottom,//底部需要展示的widget
    this.elevation,//阴影高度，默认为4
    this.shadowColor,
    this.shape,//ShapeBorder 类型，表示描边形状
    this.backgroundColor,//背景色
    this.brightness,//Brightness类型，表示当前 appbar 主题是亮或暗色调，有 dark 和 light 两个值
    this.iconTheme,//图标主题，可影响包括leading、title、actions中icon
    this.actionsIconTheme,//导航条上右侧widgets主题
    this.textTheme,//导航条上文字主题
    this.primary = true,//true时，appBar会以系统状态栏高度为间距显示在下方；false时，会和状态栏重叠，相当于全屏显示。
    this.centerTitle,//标题是否居中显示
    this.excludeHeaderSemantics = false,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//title 区域水平方向与 leading 和 actions 的间距(padding)
    this.toolbarOpacity = 1.0,//toolbar 区域透明度
    this.bottomOpacity = 1.0,//bottom 区域透明度
    this.toolbarHeight,//toolbar 高度
  }) 

AppBar 的使用

AppBar 使用非常简单，只需要按照构造参数传递所需参数即可。

代码如下：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("这是一个标题"),
        leading: new IconButton(
          icon: new Icon(Icons.arrow_back),
          onPressed: () => Navigator.pop(context),
        ),
        actions: [new IconButton(icon: new Icon(Icons.done), onPressed: () => updateDataAndClose(context))],
        centerTitle: true,
        backgroundColor: Colors.lightGreen,
        toolbarHeight: 60,
      ),
      body: ……
    );
  }

---

**PS：更多精彩内容，请查看 --> 《Flutter 开发》
**PS：更多精彩内容，请查看 --> 《Flutter 开发》
**PS：更多精彩内容，请查看 --> 《Flutter 开发》