Flutter TabBar

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011272795/article/details/82432071

Tab关键元素

• TabController
  这是Tab页的控制器，用于定义Tab标签和内容页的坐标，还可配置标签页的切换动画效果等。

TabController一般放入有状态控件中使用，以适应标签页数量和内容有动态变化的场景，如果标签页在APP中是静态固定的格局，则可以在无状态控件中加入简易版的DefaultTabController以提高运行效率，毕竟无状态控件要比有状态控件更省资源，运行效率更快。

• TabBar
  Tab页的Title控件，切换Tab页的入口，一般放到AppBar控件下使用，内部有*Title属性。其子元素按水平横向排列布局，如果需要纵向排列，请使用Column或ListView控件包装一下。子元素为Tab类型的数组。

• TabBarView
  Tab页的内容容器，其内放置Tab页的主体内容。子元素可以是多个各种类型的控件。

先看一下Tab的构造方法:

TabBar({
    Key key,
    @required this.tabs,
    this.controller,
    this.isScrollable: false,
    this.indicatorColor,
    this.indicatorWeight: 2.0,
    this.indicatorPadding: EdgeInsets.zero,
    this.indicator,
    this.indicatorSize,
    this.labelColor,
    this.labelStyle,
    this.unselectedLabelColor,
    this.unselectedLabelStyle,
  })

属性	意义
tabs	一般使用Tab对象,当然也可以是其他的Widget
controller	TabController对象
isScrollable	是否可滚动
indicatorColor	指示器颜色
indicatorWeight	指示器厚度
indicatorPadding	底部指示器的Padding
indicator	指示器decoration，例如边框等
indicatorSize	指示器大小计算方式
labelColor	选中Tab文字颜色
labelStyle	选中Tab文字Style
unselectedLabelColor	未选中Tab中文字颜色
unselectedLabelStyle	未选中Tab中文字style

Tab使用方法

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final List<Tab> myTabs = <Tab>[
    Tab(text: '明教'),
    Tab(text: '霸刀'),
    Tab(text: '天策'),
    Tab(text: '纯阳'),
    Tab(text: '少林'),
    Tab(text: '藏剑'),
    Tab(text: '七秀'),
    Tab(text: '五毒'),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: myTabs.length,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
           title: TabBar(
            tabs: myTabs,
            isScrollable: true,
            indicatorColor: Colors.red,
            labelColor: Colors.white,
          ),
        ),
        body: TabBarView(
            children: myTabs
                .map((Tab tab) => Center(child: Text(tab.text)))
                .toList()),
      ),
    );
  }
}