Flutter 基础Widgets之AppBar详解

概述

AppBar Material风格应用栏，有工具栏和其他的Widget构成 应用栏通常用于Scaffold.appBar属性，该属性将应用栏放置在屏幕顶部的固定高度小部件中。对于可滚动的应用栏，请参阅SliverAppBar，它将一个AppBar嵌入到一个条子中，以便在CustomScrollView中使用。

appBar构造函数

AppBar({Key key,this.leading,this.automaticallyImplyLeading = true,this.title,this.actions,this.flexibleSpace,this.bottom,this.elevation,this.backgroundColor,this.brightness,this.iconTheme,this.textTheme,this.primary = true,this.centerTitle,this.titleSpacing = NavigationToolbar.kMiddleSpacing,this.toolbarOpacity = 1.0,this.bottomOpacity = 1.0,}) 复制代码

• leading 在title组件前面的组件，一般是一个图标按钮，比如一个抽屉按钮
• automaticallyImplyLeading 配合leading使用，取决于automaticallyImplyLeading == true && leading ==null 此时会自动做出一些哈事情
• title appBar的主要部件，类型为Widget，一般显示文本
• actions title之后显示的部件，其实这样看来，Appbar可以看成一个Row (children: [])布局
• flexibleSpace 也是一个Widgets,不过好像有一些定义的Widgets 实在不知道怎么用，因为感觉大量重复
• bottom 这个小部件出现在应用程序栏的底部。 通常是一个TarBar，即一个标签栏
• elevation 控制下方阴影栏的坐标
• backgroundColor 背景颜色
• brightness 应用栏材质的亮度
• iconTheme icon主题设置
• textTheme 文本主题设置
• primary appbar是否显示在任务栏顶部
• centerTitle title是否居中 实测没变化
• titleSpacing 横轴上围绕title内容的间距 0.0即占据所有有用空间
• toolbarOpacity 应用程序栏的工具栏的透明程度。值1.0是完全不透明的，值0.0是完全透明的
• toolbarOpacity appBar底部透明度，设置方式同toolbarOpacity

实例-实现一个带抽屉的云盘搜索界面

class AppBarLearn extends StatelessWidget {@overrideWidget build(BuildContext context) {return new DefaultTabController(length: 3,child: new Scaffold(// AppBar Material 应用栏，有工具栏和其他的Widget构成 应用栏通常用于Scaffold.appBar属性，// 该属性将应用栏放置在屏幕顶部的固定高度小部件中。对于可滚动的应用栏，// 请参阅SliverAppBar，它将一个AppBar嵌入到一个条子中，以便在CustomScrollView中使用。appBar: AppBar(// leading: ,// 现在标题前面的Widget，一般为一个图标按钮，也可以是任意Widgetleading: Builder(builder: (BuildContext context) {return IconButton(icon: const Icon(Icons.menu),// 如果有抽屉的话的就打开onPressed: () {Scaffold.of(context).openDrawer();},// 显示描述信息tooltip:MaterialLocalizations.of(context).openAppDrawerTooltip,);},),// 配合leading使用，取决于automaticallyImplyLeading == true && leading ==null ，此时会自动做出一些哈事情。automaticallyImplyLeading: true,// appBar的主要部件，类型为Widget，那么尝试做成输入框？title: TextField(// 光标颜色cursorColor: Colors.blueGrey),// title之后显示的部件，其实这样看来，Appbar可以看成一个Row (children: <Widget>[])布局actions: <Widget>[Container(padding: EdgeInsets.only(right: 16),child: Icon(Icons.search),),],// 也是一个Widgets,不过好像有一些定义的Widgets 实在不知道怎么用，应为感觉大量重复，flexibleSpace: FlexibleSpaceBar(title: Text('')),// 这个小部件出现在应用程序栏的底部。 通常是一个TarBar，即一个标签栏bottom: new TabBar(tabs: <Widget>[new Tab(icon: Icon(Icons.cloud_done)),new Tab(icon: Icon(Icons.cloud_download)),new Tab(icon: Icon(Icons.cloud_upload)),]),// 控制下方阴影栏的坐标elevation: 4.0,// 背景颜色backgroundColor: Colors.blueAccent,// 应用栏材质的亮度。brightness: Brightness.light,// icon主题设置iconTheme: IconThemeData(),// 文本主题设置textTheme: TextTheme(),// appbar是否显示在任务栏顶部primary: true,// title是否居中 实测没变化centerTitle: true,// 横轴上围绕title内容的间距 0.0即占据所有有用空间titleSpacing: 0.0,// 应用程序栏的工具栏部分是多么不透明。值1.0是完全不透明的，值0.0是完全透明的。toolbarOpacity: 1,// appabr底部透明度，设置方式同toolbarOpacitybottomOpacity: 1,),body: new TabBarView(children: <Widget>[new Icon(Icons.cloud_done, size: 100),new Icon(Icons.cloud_download, size: 100),new Icon(Icons.cloud_upload, size: 100),]),// 定义一个空抽屉drawer: Drawer(),));} }复制代码

实现效果：

转载于:https://juejin.im/post/5cc31c216fb9a0321d73b131

总结

以上是生活随笔为你收集整理的Flutter 基础Widgets之AppBar详解的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。