天天看點
傳回

flutter布局-9-appbar導航欄和狀态欄MaterialApp

目錄

  • MaterialApp
    • 先看下上圖的具體用法
    • 1. title：标題
    • 2. actions：表示右側的按鈕的動作
    • 3. leading：表示左側的按鈕的動作
    • 4. flexibleSpace：
    • 5. backgroundColor: Colors.red, //導航欄和狀态欄的的顔色
    • 6. elevation: 10, //陰影的高度
    • 7.bottom :導航欄下面顯示的widget
    • 8.brightness ：狀态欄的亮度
    • 9. iconTheme，左側圖表的樣式
    • 12. toolbarOpacity: 0.5, //整個導航欄的不透明度
    • 14. titleSpacing: 10, //标題兩邊的空白區域,

示例 github： flutterlayout https://github.com/LiuC520/flutterlayout

MaterialApp

連載：flutter布局-1-column

連載：flutter布局-2-row

連載：flutter布局-3-center

連載：flutter布局-4-container

連載：[flutter布局-5-Matrix4矩陣變換

連載：flutter布局-6-MaterialApp

連載：flutter布局-7-About對話框

連載：flutter布局-8-animated_icons動畫圖檔

AppBar: 包含狀态欄和導航欄

flutter布局-9-appbar導航欄和狀态欄MaterialApp

先看下上圖的具體用法 

appBar: AppBar(
        title: Container(
          color: Colors.white10,
          child: Row(
            children: <Widget>[Text('标題1'), Text('标題2')],
          ),
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.playlist_play),
            tooltip: 'Air it',
            onPressed: null,
          ),
          IconButton(
            icon: Icon(Icons.playlist_add),
            tooltip: 'Restitch it',
            onPressed: null,
          ),
        ],
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            );
          },
        ), // 左側傳回按鈕，可以有按鈕，可以有文字
        flexibleSpace: Text('d12321312'),
        backgroundColor: Colors.red, //導航欄和狀态欄的的顔色
        elevation: 10, //陰影的高度
        bottom: PreferredSize(
            child: Text('bottom'),
            preferredSize: Size(30, 30)), // 在appbar下面顯示的東西
        brightness: Brightness.light, //控制狀态欄的顔色，lignt 文字是灰色的，dark是白色的
        iconTheme: IconThemeData(
            color: Colors.yellow,
            opacity: 0.5,
            size: 30), //icon的主題樣式,預設的顔色是黑色的，不透明為1，size是24
        textTheme: TextTheme(), //這個主題的參數比較多,flutter定義了13種不同的字型樣式
        centerTitle: true, //标題是否居中，預設為false
        toolbarOpacity: 0.5, //整個導航欄的不透明度
        bottomOpacity: 0.8, //bottom的不透明度
        titleSpacing: 10, //标題兩邊的空白區域,
      ),

1. title：标題

可以是文字或者widget，可以自定義

如：

Container(
          color: Colors.white10,
          child: Row(
            children: <Widget>[Text('标題1'), Text('标題2')],
          ),
        ),
//表示兩個文字橫向排列
           
// 也可以直接用一個text來代替
Text('标題1')

2. actions：表示右側的按鈕的動作

是一個包含widget的數組：

actions: <Widget>[
          IconButton(
            icon: Icon(Icons.playlist_play),
            tooltip: 'Air it',
            onPressed: null,
          ),
          IconButton(
            icon: Icon(Icons.playlist_add),
            tooltip: 'Restitch it',
            onPressed: null,
          ),
        ],

上面表示兩個按鈕，同時還有點選事件，隻不過上面我把點選事件寫成了空的。

3. leading：表示左側的按鈕的動作

這個也是一個widget，也可以自定義動作，如下：

leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            );
          },
        ), // 左側傳回按鈕，可以有按鈕，可以有文字
上面表示構造一個新的widget，點選事件是打開左側的抽屜

4. flexibleSpace：

堆疊在工具欄和标簽欄後面。 它的高度與應用欄的整體高度相同。

flexible space 實際上并不靈活，除非[AppBar]的容器改變了[AppBar]的大小。 [CustomScrollView]中的[SliverAppBar]在滾動時更改[AppBar]的高度。

也可以看下 FlexibleSpaceBar

flexibleSpace: Text('d12321312'),
           
flexibleSpace: FlexibleSpaceBar(
          title: Text('flexibleSpace'),
          background: Icon(Icons
              .add), //背景，一般是一個圖檔，在title後面，[Image.fit] set to [BoxFit.cover].
          centerTitle: true,
          collapseMode: CollapseMode
              .pin, // 背景 固定到位，直到達到最小範圍。 預設是CollapseMode.parallax(将以視差方式滾動。)，還有一個是none，滾動沒有效果
        ),

5. backgroundColor: Colors.red, //導航欄和狀态欄的的顔色

導航欄的顔色和樣式可以再Main.dart的MaterialApp裡面配置統一的。

但有時間我們的某些頁面有單獨的設計，這個背景也是可以修改的。

flutter布局-6-MaterialApp

6. elevation: 10, //陰影的高度

預設在導航欄的下面有4的高度陰影，這個也可以修改的

7.bottom :導航欄下面顯示的widget

看上面圖檔中的bottom文字

bottom: PreferredSize(
            child: Text('bottom'),
            preferredSize: Size(30, 30)), // 在appbar下面顯示的東西

其中這個bottom是需要

PreferredSize

的，裡面有child和寬高，寬高用size來設定

8.brightness ：狀态欄的亮度

這與

[backgroundColor]，[iconTheme]，[textTheme]

一起設定。

預設是和

ThemeData.primaryColorBrightness

一緻的.

Brightness.light,   白底黑字
Brightness.dark,   黑底白字

9. iconTheme，左側圖表的樣式 

iconTheme: IconThemeData(
            color: Colors.yellow,
            opacity: 0.5,
            size: 30), //icon的主題樣式,預設的顔色是黑色的，不透明為1，size是24

表示顔色是黃色，不透明度是0.5，最大值是1；

以及大小是30，預設的大小是24

##10.textTheme：字型的樣式

我們要設定的話一般用merge，這樣不會改變其他的值。

預設有13中樣式：

NAME       SIZE   WEIGHT   SPACING  2018 NAME
display4   112.0  thin     0.0      headline1
display3   56.0   normal   0.0      headline2
display2   45.0   normal   0.0      headline3
display1   34.0   normal   0.0      headline4
headline   24.0   normal   0.0      headline5
title      20.0   medium   0.0      headline6
subhead    16.0   normal   0.0      subtitle1
body2      14.0   medium   0.0      body1
body1      14.0   normal   0.0      body2
caption    12.0   normal   0.0      caption
button     14.0   medium   0.0      button
subtitle   14.0   medium   0.0      subtitle2
overline   10.0   normal   0.0      overline

其中thin 表示字型的粗細為

FontWeight.w100

normal是

FontWeight.w400

medium是

FontWeight.w500

字元間距為

0.0

size就是字型的大小

##11.centerTitle：标題是否居中

centerTitle: true, //标題是否居中，預設為false

預設是false，一般我們的設計都是把導航欄的标題居中，不遵循android的md設計，都是按照蘋果的設計來的

12. toolbarOpacity: 0.5, //整個導航欄的不透明度

##13. bottomOpacity: 0.8, //bottom的不透明度

14. titleSpacing: 10, //标題兩邊的空白區域,

示例所在的位置：https://github.com/LiuC520/flutterlayout/blob/master/lib/material/appbar.dart

Flutter 導航欄 狀态欄 appbar
上一篇: 批量生成Code128- C條碼
下一篇: 2022年來了，從Python定制一份月曆開始吧！

繼續閱讀