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）