Flutter 顶部导航 AppBar 的实现

本文主要是介绍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>类型，导航栏右侧要展示的一组 widgetsthis.flexibleSpace,this.bottom,//底部需要展示的widgetthis.elevation,//阴影高度，默认为4this.shadowColor,this.shape,//ShapeBorder 类型，表示描边形状this.backgroundColor,//背景色this.brightness,//Brightness类型，表示当前 appbar 主题是亮或暗色调，有 dark 和 light 两个值this.iconTheme,//图标主题，可影响包括leading、title、actions中iconthis.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 使用非常简单，只需要按照构造参数传递所需参数即可。

代码如下：

  @overrideWidget 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 开发》

这篇关于Flutter 顶部导航 AppBar 的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---