flutter布局-9-appbar导航栏和状态栏

示例 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: 包含状态栏和导航栏

screenshot.png

先看下上图的具体用法

  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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 1.App结构和导航 Scaffold:Material Design布局结构的基本实现。此类提供了用于显示dra...
    慕容小伟阅读 3,491评论 0 3
  • Google 出品,Dart语言,Flutter Engine引擎,响应式设计模式,原生渲染。 目录 1. 什么是...
    兰朋友_阅读 4,604评论 0 3
  • Content: Flutter框架概况发展概述发展历史框架特性框架结构 快速入门安装Flutter在Mac OS...
    EchoZuo阅读 6,379评论 3 54
  • 今天,偶勒很费勒生日。 居然,还有人关注… 一是感谢! 二是,我知道,都是因为我闹腾。 no好意思,谢谢配合。 场...
    俊哥哥哥阅读 473评论 0 0
  • 爱情心理学研究发观,对方的外在形象、内涵价值、社会条件,以及自身的需要、兴趣、理想、性格、修养等影响着对象的选择。...
    so丶晚安阅读 164评论 0 0