第二章●第二节：应用栏（Appbar）

2019年5月8日 290次阅读 来源: ohayoi
AppBar由工具栏和其他组件组成，如TabBar和FlexibleSpaceBar。AppBar通常使用IconButtons公开一个或多个常见的操作，也可以使用PopupMenuButton，用于不常见的操作（有时称为“溢出菜单”）。

TabBar：一个显示水平Tabs的Material Design组件。通常使用AppBar.bottom与TabBarView（用来显示与每个TabBar对应的页面视图）结合实现AppBar底部的切换选项卡。在TabBar与TabBarView结合使用时，若未提供TabController，则必须提供父级DefaultTabController。并且选项卡控制器的TabController.length必须等于选项卡列表的长度。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyTabbedPage());

//选项卡
class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);

  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab> [
    Tab(text: '首页', icon: Icon(Icons.home),),
    Tab(text: '消息', icon: Icon(Icons.message),),
    Tab(text: '我的', icon: Icon(Icons.account_circle),)
  ];

  TabController _tabController;
  String appBarTitle = "首页";
  @override
  void initState() {
    super.initState();
    //监听选项卡事件，选择选项卡重置AppBar标题
    _tabController = TabController(length: myTabs.length, vsync: this)..addListener(() {
      if(_tabController.indexIsChanging) {
        setState(() {
          appBarTitle = '${myTabs[_tabController.index].text}';
        });
      }
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(appBarTitle),
          bottom: TabBar(
            tabs: myTabs,//两个或多个Tab组件的列表
            controller: _tabController,//组件的选择和动画状态
            isScrollable: true,//选项卡是否可以水平滚动，若为true，则每个选项卡宽度与其标签一样宽，并且整个TabBar都可以滚动。否则每个选项卡将根据可用空间被等分
            indicatorColor: Colors.red,//显示在选项卡下边的线条颜色，如果设置为null，则使用Theme的indicatorColor属性的颜色值
            indicatorWeight: 2.0,//选项卡下边线条的权重，也就是粗细
            indicatorPadding: EdgeInsets.all(5.0),//选中选项卡下边的线条水平填充
            //定义所选选项卡指示器的外观,如果指定该属性值，则忽略indicatorColor，indicatorWeight和indicatorPadding属性
            //可以使用UnderlineTabIndicator定义默认值，下划线样式，选中Tab标签的线条样式
            //indicator: BoxDecoration(color: Colors.amber, border: Border.all(width: 2.0, color: Colors.deepOrange)),
            indicatorSize: TabBarIndicatorSize.tab,//定义选中选项卡下边线条的宽度，与文本标签一样宽，与tab标签一样宽
            labelColor: Colors.deepPurple,//选中Tab中文本标签样式
            labelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),//所选标签的文本样式
            labelPadding: EdgeInsets.all(10.0),//选项卡文本标签内边距
            unselectedLabelStyle: TextStyle(fontSize: 12.0),//未选中的Tab文本标签样式
            unselectedLabelColor: Colors.deepOrangeAccent,//未选中的Tab文本标签颜色
            dragStartBehavior: DragStartBehavior.down,//确定处理拖动开始行为方式
          ),

        ),
        body: TabBarView(
          controller: _tabController,
          children: myTabs.map((Tab tab) {
            return Center(child: Text(tab.text),);
          }).toList(),
        ),
      ),
    );
  }
}

效果图如下：

《第二章●第二节：应用栏（Appbar）》 TabBar

用于扩展和折叠Material Design AppBar，常用于SliverAppBar.flexibleSpace属性来灵活控制组件的滚动而展开和收缩。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyFlexibleSpaceBar());

class MyFlexibleSpaceBar extends StatefulWidget {
  const MyFlexibleSpaceBar({Key key}):super(key: key);

  @override
  _MyFlexiblePaceBarPageState createState() => _MyFlexiblePaceBarPageState();
}

class _MyFlexiblePaceBarPageState extends State<MyFlexibleSpaceBar> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlexibleSpaceBar组件'),
        ),
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget> [
              SliverAppBar(
                expandedHeight: 150.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text(
                    "可折叠的组件"
                  ),
                ),
                backgroundColor: Colors.red,
              ),
            ];
          },
          body: Center(
            child: Text("向上拖动，查看效果"),
          ),
        ),
      ),
    );
  }
}

效果如下：

《第二章●第二节：应用栏（Appbar）》 FlexibleSpaceBar

从上边示例我们可以看出，通常使用Scaffold.appBar属性，将AppBar放置在屏幕顶部并固定高度。对于可以滚动的AppBar，我们可以使用SliverAppBar。
我们可以在AppBar上显示工具栏组件，标题组件前显示的组件，标题组件，标题组件后显示的操作组件以及AppBar底部的组件（如果有的话）。如果指定了flexibleSpace窗口组件，则它将堆叠在工具栏和底部窗口组件后。

《第二章●第二节：应用栏（Appbar）》 AppBar布局

如果我们省略了leading组件，但应用程序中我们实现了抽屉式的组件，则会自动在leading组件位置插入一个打开抽屉的按钮。可以通过automatedImplyLeading设置为false来关闭此行为。
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyAppBar());

class MyAppBar extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          actions: <Widget>[
            IconButton(icon: Icon(Icons.add), onPressed: () {

            }),
          ],
          leading: Icon(Icons.face),
          centerTitle: false,//控制文本标签是否居中
          title: Text("AppBar组件"),
          flexibleSpace: Icon(Icons.print),
          bottom: PreferredSize(
            child: Text("我是AppBar Bottom"),
            preferredSize: Size(10.0, 10.0),
          ),
        ),
      ),
    );
  }
}

效果如下：

《第二章●第二节：应用栏（Appbar）》 AppBar

AppBar 属性

《第二章●第二节：应用栏（Appbar）》 AppBar属性

本节内容到此结束，若在使用过程中遇到问题，欢迎留言交流，我们一起成长。

总目录结构

    原文作者：ohayoi
    原文地址: https://www.jianshu.com/p/7317381fee5f
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞