第二章●第二节:应用栏(Appbar)

AppBar由工具栏和其他组件组成,如TabBarFlexibleSpaceBarAppBar通常使用IconButtons公开一个或多个常见的操作,也可以使用PopupMenuButton,用于不常见的操作(有时称为“溢出菜单”)。

TabBar:一个显示水平Tabs的Material Design组件。通常使用AppBar.bottomTabBarView(用来显示与每个TabBar对应的页面视图)结合实现AppBar底部的切换选项卡。在TabBarTabBarView结合使用时,若未提供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 with SingleTickerProviderStateMixin {
  final List myTabs =  [
    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)_第1张图片
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 with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlexibleSpaceBar组件'),
        ),
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return  [
              SliverAppBar(
                expandedHeight: 150.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text(
                    "可折叠的组件"
                  ),
                ),
                backgroundColor: Colors.red,
              ),
            ];
          },
          body: Center(
            child: Text("向上拖动,查看效果"),
          ),
        ),
      ),
    );
  }
}

效果如下:

第二章●第二节:应用栏(Appbar)_第2张图片
FlexibleSpaceBar
从上边示例我们可以看出,通常使用Scaffold.appBar属性,将AppBar放置在屏幕顶部并固定高度。对于可以滚动的AppBar,我们可以使用SliverAppBar
我们可以在AppBar上显示工具栏组件,标题组件前显示的组件,标题组件,标题组件后显示的操作组件以及AppBar底部的组件(如果有的话)。如果指定了flexibleSpace窗口组件,则它将堆叠在工具栏和底部窗口组件后。
第二章●第二节:应用栏(Appbar)_第3张图片
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: [
            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)_第4张图片
AppBar

AppBar 属性

第二章●第二节:应用栏(Appbar)_第5张图片
AppBar属性

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


总目录结构

你可能感兴趣的:(第二章●第二节:应用栏(Appbar))