Flutter之自定义AppBar及顶部导航切换

AppBar常用属性

属性	描述
leading	在标题前面显示的一个控件，在首页通常显示应用的logo；在其他界面通常显示为返回按钮
title	标题，通常显示为当前页面的标题，是一个widget
actions	通常使用IconButton来表示，可以放按钮组
bottom	通常放tabBar，标题下面显示一个Tab导航栏
backgroundColor	导航背景颜色
iconTheme	图标样式
textTheme	文字样式
centerTitle	标题是否居中

一、自定义AppBar：

import 'package:flutter/material.dart';

class AppBarPage extends StatelessWidget {
  AppBarPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("This is AppBar"),
        backgroundColor: Colors.lightBlue,
        centerTitle: true,
        leading: IconButton(
          onPressed: () {
            Navigator.pushNamed(context, "/");
          },
          icon: Icon(Icons.menu),
        ),
        actions: <Widget>[
          IconButton(
            onPressed: () {
              print('settings');
            },
            icon: Icon(Icons.settings),
          ),
          IconButton(
            onPressed: () {
              print('search');
            },
            icon: Icon(Icons.search),
          ),
        ],
      ),
      body: Center(
        child: Text("AppBar"),
      ),
    );
  }
}

 二、自定义AppBar实现顶部Tab切换

TabBar常用属性

tabs	显示的标签内容，一般使用 Tab 对象,也可以是其他 的 Widget
controller	TabController 对象
isScrollable	是否可滚动
indicatorColor	指示器颜色
indicatorWeight	指示器高度
indicatorPadding	底部指示器的 Padding
indicator	指示器 decoration，例如边框等
indicatorSize	指示器大小计算方式，TabBarIndicatorSize.label 跟文 字等宽,TabBarIndicatorSize.tab 跟每个 tab 等宽
labelColor	选中 label 颜色
labelStyle	选中 label 的 Style
labelPadding	每个 label 的 padding 值
unselectedLabelColor	未选中 label 颜色
unselectedLabelStyle	未选中 label 的 Style

import 'package:flutter/material.dart';

class AppBarPage extends StatelessWidget {
  AppBarPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 7,
      child: Scaffold(
          appBar: AppBar(
            title: Text("This is AppBar"),
            backgroundColor: Colors.lightBlue,
            centerTitle: true,
            actions: <Widget>[
              IconButton(
                onPressed: () {
                  print('search');
                },
                icon: Icon(Icons.search),
              ),
            ],
            bottom: TabBar(
              isScrollable: true,
              labelStyle:TextStyle(fontSize: 20),
              unselectedLabelStyle:TextStyle(fontSize: 15),
              indicatorColor:Colors.lightBlueAccent,
              unselectedLabelColor: Colors.white,
              labelColor:Colors.lightBlueAccent,
              tabs: <Widget>[
                Tab(
                  text: "关注",
                ),
                Tab(
                  text: "推荐",
                ),
                Tab(
                  text: "放映厅",
                ),
                Tab(
                  text: "视频",
                ),
                Tab(
                  text: "抗击肺炎",
                ),
                Tab(
                  text: "图文",
                ),
                Tab(
                  text: "颜值",
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              ListView(
                children: <Widget>[
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
            ],
          )),
    );
  }
}

三、底部TabBar集成顶部TabBar

如果在已集成的Scaffold中的TabBar要集成顶部TabBar就不能再使用Scaffold，否则会出现两个AppBar，可以将titile中使用Expanded组件来实现

import 'package:flutter/material.dart';

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

  @override
  _LinkmanPageState createState() {
    return _LinkmanPageState();
  }
}

class _LinkmanPageState extends State<LinkmanPage> {
  @override
  void initState() {
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            children: <Widget>[
              Expanded(
                child: TabBar(
                  tabs: <Widget>[
                    Tab(text: "个人通讯录",),
                    Tab(text: "公司通讯录",),
                  ],
                ),
              )
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Center(child: Text("个人通讯录"),),
            Center(child: Text("公司通讯录"),),
          ],
        ),
      ),
    );
  }
}