flutter 中的AppBar

在flutter中的很多页面中，都会有下面这段代码：

对应就是下图中的红色线框区域，被称作AppBar顶部导航。

项目准备

在使用AppBar之前，我们先新建一个tabBar的项目：

然后在pages文件夹下新建AppBarDemo.dart页面：

import 'package:flutter/material.dart';

class AppBarDemoPage extends StatelessWidget {
 const AppBarDemoPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title:Text('AppBarDemo'),
      ),
      body:Text('1111'),
    );
  }
}

然后配置路由：

并在Home.dart中添加跳转按钮：

但是这种情况下，项目启动后，默认加载的还是Home.dart页面，然后点击按钮，跳转到AppBarDemo.dart页面，为了方便操作，这里设置默认加载AppBarDemo.dart页面，只需要修改main.dart中的

initialRoute就可以了。

常用属性

在flutter中，AppBar有以下常用的可选属性：

• leading ：在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
• title ：标题，通常显示为当前界面的标题文字，可以放组件
• actions ：通常使用 IconButton 来表示，可以放按钮组
• bottom ：通常放 tabBar，标题下面显示一个 Tab 导航栏
• backgroundColor ：导航背景颜色
• iconTheme ：图标样式
• textTheme ：文字样式
• centerTitle ：标题是否居中显示

AppBarDemo.dart

import 'package:flutter/material.dart';

class AppBarDemoPage extends StatelessWidget {
  const AppBarDemoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("AppBarDemoPage"),
        // backgroundColor: Colors.red,
        centerTitle:true,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: (){
            print('menu');
          },
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: (){
              print('search');
            },
          ),
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: (){
              print('settings');
            },
          )
        ],

      ),
      body: Text('1111'),
    );
  }
}

代码下载：点这里（提取码：fu4v）