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）