1. 写在前面

在上篇文章中介绍了Flutter中的Image组件，今天继续学习【Flutter】基础组件中的Appbar组件。

  • 【基础语法合集】

【Flutter】Dart中的var、final 和 const基本使用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的方法与箭头函数

【Flutter】Dart的方法中的可选参数、方法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和对象

【Flutter】Dart中的构造函数

【Flutter】Dart的工厂构造方法&单例对象&初始化列表

【Flutter】Dart的类方法和对象操作符

【Flutter】Dart中的继承

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗？

  • [基础组件合集]

【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

【Flutter】基础组件【03】Scaffold

【Flutter】基础组件【04】Row/Column

【Flutter】基础组件【05】Icon

【Flutter】基础组件【06】Image

2. Appbar

类似于我们iOS里面的导航栏，可以设置title，左右action，

一个Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。

2.1 Appbar属性

  • leading：左侧的action功能
  • title：标题文字。
  • actions ：右侧的action功能，也可以使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单，实现功能聚合。
  • bottom：通常是 TabBar，Tab 导航栏。
  • elevation： 控件的 z 坐标
  • flexibleSpace：可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用，类似于Android中的CollapsingToolbarLayout，可以轻松实现页面头部展开、合并的效果，这个组件后期会讲到。
  • backgroundColor： Appbar 的颜色，改值通常和下面的三个属性一起使用。
  • brightness： Appbar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness。
  • iconTheme ：Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。
  • textTheme：Appbar 上的文字样式。
  • centerTitle：标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。
  • titleSpacing： 标题与其他控件的空隙
  • toolbarOpacity： AppBar tool区域透明度
  • bottomOpacity： bottom区域透明度

2.2 Appbar代码举例

  • Appbar代码举例
void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);// This widget is the root of your application.@overrideWidget build(BuildContext context) {return const MaterialApp(home:  MyHomePage(),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key}) : super(key: key);@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text("我是AppBar"),),);}}
  • 运行效果

2.3 leading代码举例

  • leading相当于返回按钮
leading: IconButton(icon: Icon(Icons.arrow_back),onPressed: () {Navigator.pop(context);}),

2.4 actions代码举例