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）