Flutter-AppBar(顶端栏)

先上个图,直观感受一下AppBar的内部结构
AppBar是一个顶端栏,对应着 Android 的 Toolbar。

image

AppBar 有以下常用属性:

leading → Widget - 在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮。如果省略了 leading ,但 AppBar 在带有 Drawer 的 Scaffold 中,则会插入一个 button 以打开 Drawer。如果没有Drawer , 默认的是个返回箭头,可以通过设置来关闭automaticallyImplyLeading 为false ,

automaticallyImplyLeading → bool- 设置automaticallyImplyLeading= true:如果有 leading 这个不会管用 ; 如果没有leading ,当有侧边栏的时候, false:不会显示默认的图片,true 会显示 默认图片,并响应打开侧边栏的事件

title → Widget - Toolbar 中主要内容,通常显示为当前界面的标题文字。

actions → List - 一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示;对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单。

bottom → PreferredSizeWidget - 一个 AppBarBottomWidget 对象,通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏。

elevation → double - 控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值。

flexibleSpace → Widget - 一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用。

backgroundColor → Color - Appbar 的颜色,默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用。

brightness → Brightness - Appbar 的亮度,有白色和黑色两种主题,默认值为 ThemeData.primaryColorBrightness。

iconTheme → IconThemeData - Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。

textTheme → TextTheme - Appbar 上的文字样式。

centerTitle → bool - 标题是否居中显示,默认值根据不同的操作系统,显示方式不一样。

toolbarOpacity → double

bottomOpacity → double

image
image
image

demo

class _StatisticsPageState extends State<StatisticsPage>  with SingleTickerProviderStateMixin{

  final List<Tab> _tabs = <Tab>[
    Tab(text: '关注'),
    Tab(text: '推按'),
    Tab(text: '视频'),
    Tab(text: '游戏'),
    Tab(text: '音乐'),
    Tab(text: '体育'),
    Tab(text: '生活'),
    Tab(text: '图片'),
  ];

  var _tabController;
  @override
  void initState() {
    // TODO: implement initState
    _tabController = TabController(vsync: this, length: _tabs.length);
    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: _drawer(context),
        body: TabBarView(
        controller: _tabController,
            children: _tabs.map((Tab tab) {
              return Center(child:Text(tab.text));
            }).toList(),
        ),
        appBar: AppBar(
            leading: Icon(Icons.home),
            // 如果没有设置这项, 二级页面 会默认是返回箭头  , 有侧边栏的页面默认有图标(用来打开侧边栏)
            automaticallyImplyLeading: true,
            // 如果有 leading  这个不会管用 ; 如果没有leading ,当有侧边栏的时候, false:不会显示默认的图片,true 会显示 默认图片,并响应打开侧边栏的事件
            title: Text("标题"),
            centerTitle: true,
            // 标题是否在居中
            actions: <Widget>[
              IconButton(
                  icon: Icon(Icons.save), tooltip: 'Add Alarm', onPressed: () {
                    // 不写onPressed 默认,这个图片不能点击 且会有不可点击的样式(和 写了这个有不同的样式)
      // 如果有 onPressed 但是值是null 也会是不可点击的样式
                  }),
              PopupMenuButton<String>(
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
              _selectView(Icons.message, '发起群聊', 'A'),
              _selectView(Icons.group_add, '添加服务', 'B'),
              _selectView(Icons.cast_connected, '扫一扫码', 'C'),
              ],
                onSelected: (String action) {
                // 点击选项的时候
                  switch (action) {
                    case 'A': break;
                    case 'B': break;
                    case 'C': break;
                    }
                  },
              ),
            ],
            bottom: TabBar(
                isScrollable: true,
                labelColor: Colors.redAccent, // 选中的Widget颜色
            indicatorColor:Colors.redAccent, // 选中的指示器颜色
            labelStyle:   TextStyle(fontSize: 15.0),// 必须设置,设置 color 没用的,因为 labelColor 已经设置了
            unselectedLabelColor: Colors.white,
            unselectedLabelStyle:   TextStyle(
                fontSize: 15.0), // 设置 color 没用的,因为unselectedLabelColor已经设置了
            controller: _tabController,
            // tabbar 必须设置 controller 否则报错
            indicatorSize: TabBarIndicatorSize.label,
            // 有 tab 和 label 两种
            tabs: _tabs,
        ),
        elevation: 0.1,
        // 导航栏Z轴的高度,默认是1  默认就是有高度 阴影的
        //backgroundColor: Colors.red,// 导航栏的颜色  默认是 ThemeData 的颜色
//          flexibleSpace: FlexibleSpaceBar(title: Text("你号"),),//这个堆叠在工具栏上面  一般 appbar不用  主要用在 SliverAppBar上
          brightness: Brightness.light, //状态栏的深度 有白色和黑色两种主题
          titleSpacing: 10,//flexibleSpace 和 title 的距离  默认是重合的
          toolbarOpacity: 0.5,// 导航栏透明度 默认是1 ,不包括flexibleSpace
          bottomOpacity: 0.5,
    ),

    );
  }
}

// 返回每个隐藏的菜单项
_selectView(IconData icon, String text, String id) {
  return PopupMenuItem<String>(
      value: id,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
           Icon(icon, color: Colors.blue),
           Text(text),
        ],
      )
  );
}
//返回bottomTabbar项
 _drawer(BuildContext context) {
  
  return Drawer(
       child: ListView(
         padding: EdgeInsets.zero,
         children: <Widget>[
           DrawerHeader(
             decoration: BoxDecoration(
               color: Colors.lightBlueAccent,
             ),
             child: Center(
               child: SizedBox(
                 width: 60.0,
                 height: 60.0,
                 child: CircleAvatar(
                   child: Text('头像'),
                 ),
               ),
             ),
           ),
           ListTile(
             title: Text('Item 1'),
             leading:   CircleAvatar(
               child:   Icon(Icons.school),
             ),
             onTap: () {
               Navigator.pop(context);
               },
           ),
           ListTile(
             title: Text('Item 2'),
             leading:   CircleAvatar(
               child:   Text('B2'),
             ),
             onTap: () {
               Navigator.pop(context);
               },
),
           ListTile(
             title: Text('Item 3'),
             leading: CircleAvatar(
               child: Icon(Icons.list),
             ),
             onTap: () {
               Navigator.pop(context);
               },
           ),
         ],
       ),
  );
}

关于SliverAppBar全解析请参看
https://blog.csdn.net/yechaoa/article/details/90701321
TabBar、TabBarView的使用请参看
https://blog.csdn.net/yechaoa/article/details/90482127

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

推荐阅读更多精彩内容