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

一、自定义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: [
          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: [
              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: [
                Tab(
                  text: "关注",
                ),
                Tab(
                  text: "推荐",
                ),
                Tab(
                  text: "放映厅",
                ),
                Tab(
                  text: "视频",
                ),
                Tab(
                  text: "抗击肺炎",
                ),
                Tab(
                  text: "图文",
                ),
                Tab(
                  text: "颜值",
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              ListView(
                children: [
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: [
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: [
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: [
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: [
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: [
                  ListTile(
                    title: Text("Text"),
                  )
                ],
              ),
              ListView(
                children: [
                  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 {
  @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: [
              Expanded(
                child: TabBar(
                  tabs: [
                    Tab(text: "个人通讯录",),
                    Tab(text: "公司通讯录",),
                  ],
                ),
              )
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Text("个人通讯录"),),
            Center(child: Text("公司通讯录"),),
          ],
        ),
      ),
    );
  }
}

二、使用TabController实现顶部导航切换

通过tabController可以动态的去加载顶部导航和内容

上边的那种写法想实现动态的去加载一些内容比较复杂。

使用tabController必须要继承StatefulWidget

import 'package:flutter/material.dart';

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

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

class _TabBarControllerPageState extends State with SingleTickerProviderStateMixin {

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length:2, vsync: this);
    //可以加监听事件
    _tabController.addListener((){
    print(_tabController.index);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TabBarController"),
        bottom: TabBar(
          tabs: [
            Tab(text: "关注",),
            Tab(text: "热门",),
          ],
          controller: _tabController,
        ),
      ),
      body: TabBarView(
        children: [
          Center(child: Text("关注"),),
          Center(child: Text("热门"),),
        ],
        controller: _tabController,
      ),
    );
  }
}