Flutter--自定义顶部导航栏、(TabBar)TabLayout-摩杜云开发者社区

appbar属性

属性	释义
leading	导航按钮显示的图标
title	标题
actions	相当于menu
bottom	通常用来放置tabBar
backgroundColor	导航背景颜色
iconTheme	图表样式
textTheme	文字样式
centerTitle	标题是否居中显示

自定义AppBar使用

import 'package:flutter/material.dart';

class AppBarDemoPage extends StatelessWidget {
  const AppBarDemoPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("AppBarDemoPage"),
         backgroundColor: Colors.red,
        centerTitle:true,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: (){
            print('menu');
          },
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: (){
              print('search');
            },
          ),
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: (){
              print('settings');
            },
          )
        ],


      ),
      body: Text('appbardemo'),
    );
  }
}

Flutter--自定义顶部导航栏、(TabBar)TabLayout_flutter

TabBar（TabLayout）

属性

属性	释义
tabs	显示标签内容
controller	TabController对象
isScrollable	是否可滚动,即是否在一个屏幕放下所有Tab
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 AppBarDemoPage extends StatelessWidget {
  const AppBarDemoPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4, // tab个数
      child: Scaffold(
        // Tab组件必须放到Scaffold中
        appBar: AppBar(
            title: Text("TabBarDemo"),
            bottom: TabBar(
              tabs: <Widget>[
                Tab(
                  text: "热点",
                ),
                Tab(
                  text: "新闻",
                ),
                Tab(
                  text: "推荐",
                ),
                Tab(
                  text: "同城",
                )
              ],
            )),
        body: TabBarView(
          // 类似ViewPage
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(title: Text("这是第1个 tab")),
                ListTile(title: Text("这是第1个 tab")),
                ListTile(title: Text("这是第1个 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("这是第2个 tab")),
                ListTile(title: Text("这是第2个 tab")),
                ListTile(title: Text("这是第2个 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("这是第3个 tab")),
                ListTile(title: Text("这是第3个 tab")),
                ListTile(title: Text("这是第3个 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("这是第4个 tab")),
                ListTile(title: Text("这是第4个 tab")),
                ListTile(title: Text("这是第4个 tab"))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Flutter--自定义顶部导航栏、(TabBar)TabLayout_dart_02

存在Bottomnavigation的页面创建TabLayout

import 'package:flutter/material.dart';

class SystemPage extends StatefulWidget {
  SystemPage({Key key}) : super(key: key);
  _SystemPageState createState() => _SystemPageState();
}

class _SystemPageState extends State<SystemPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold( // 外部布局已经存在Scaffold,此时内部还可以再嵌套一个Scaffold
        appBar: AppBar( // 此时我们在同一个页面创建了两个appbar，所以直接在title中创建tab即可
            title: TabBar(
          tabs: <Widget>[
            Tab(
              text: "热点",
            ),
            Tab(
              text: "新闻",
            ),
            Tab(
              text: "推荐",
            ),
            Tab(
              text: "同城",
            )
          ],
        )),
        body: TabBarView(
          // 类似ViewPage
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(title: Text("这是第1个 tab")),
                ListTile(title: Text("这是第1个 tab")),
                ListTile(title: Text("这是第1个 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("这是第2个 tab")),
                ListTile(title: Text("这是第2个 tab")),
                ListTile(title: Text("这是第2个 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("这是第3个 tab")),
                ListTile(title: Text("这是第3个 tab")),
                ListTile(title: Text("这是第3个 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("这是第4个 tab")),
                ListTile(title: Text("这是第4个 tab")),
                ListTile(title: Text("这是第4个 tab"))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Flutter--自定义顶部导航栏、(TabBar)TabLayout_ide_03

通过TabController实现TabLayout

import 'package:flutter/material.dart';

class TabbarControllerPage extends StatefulWidget {
  TabbarControllerPage({Key key}) : super(key: key);
  _TabbarControllerPageState createState() => _TabbarControllerPageState();
}


class _TabbarControllerPageState extends State<TabbarControllerPage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;


   // 生命周期函数，销毁时取消订阅，类似Rx
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  // 生命周期函数， 加载即触发
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
        vsync: this,
        length: 3);
    // 接受监听
    _tabController.addListener((){
      print(_tabController.index);
    });
  }


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('顶部 tab 切换'),
        bottom: new TabBar(
          controller: _tabController, // 使用TabbarController必须加，相当于设置监听
          tabs: <Widget>[
            Tab(
              text: "热点",
            ),
            Tab(
              text: "新闻",
            ),
            Tab(
              text: "推荐",
            ),
          ],
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: <Widget>[
          new Center(child: new Text('热点')),
          new Center(child: new Text('新闻')),
          new Center(child: new Text('推荐')),
        ],
      ),
    );
  }
}

Flutter--自定义顶部导航栏、(TabBar)TabLayout_flutter_04

以上示例均在前篇路由配置基础上进行配置