flutter TabBar使用 自定义TabBarContro

TabBar简单使用

import 'package:flutter/material.dart';

/*
 * TabBar简单使用
 */
void main() {
  runApp(MyApp());
}

//自定组件就是类
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomeContent());
  }
}

/*
 * 有顶部导航栏的TabController
 */
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 8,
      child: Scaffold(
        appBar: AppBar(
          title: Text('演示顶部tabbar'),
          bottom: TabBar(
            isScrollable: true,
            indicatorColor: Colors.red,
            labelColor: Colors.red,
            unselectedLabelColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            tabs: [
              Tab(
                text: '男装',
              ),
              Tab(
                text: '没有顶部bar',
              ),
              Tab(
                text: '男装',
              ),
              Tab(
                text: '女装',
              ),
              Tab(
                text: '男装',
              ),
              Tab(
                text: '女装',
              ),
              Tab(
                text: '男装',
              ),
              Tab(
                text: '女装',
              )
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Text('男装'),
            HomeContent2(),
            Text('家电'),
            Text('日用快消'),
            Text('日用快消'),
            Text('日用快消'),
            Text('日用快消'),
            Text('日用快消')
          ],
        ),
      ),
    );
  }
}

/*
 * 没有顶部导航栏的TabController
 */
class HomeContent2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          title: Expanded(
            child: TabBar(
              indicatorColor: Colors.red,
              labelColor: Colors.red,
              unselectedLabelColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.label,
              tabs: [
                Tab(
                  text: '男装',
                ),
                Tab(
                  text: '女装',
                ),
                Tab(
                  text: '男装',
                ),
                Tab(
                  text: '女装',
                )
              ],
            ),
          ),
        ),
        body: TabBarView(
          children: [Text('男装'), Text('女装'), Text('家电'), Text('日用快消')],
        ),
      ),
    );
  }
}

自定义TabBarController

import 'package:flutter/material.dart';

/*
 * 自定义TabBarController 
 * 
 */
class TabBarControllerPage extends StatefulWidget {
  @override
  _TabBarControllerPageState createState() => _TabBarControllerPageState();
}

class _TabBarControllerPageState extends State<TabBarControllerPage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    //生命周期函数，组件一加载就会触发
    super.initState();
    _tabController = new TabController(length: 2, vsync: this);

    _tabController.addListener(() {
      print(_tabController.index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("自定义TabBarController"),
        bottom: TabBar(
          controller: this._tabController,
          tabs: [Text('男装'), Text('女装')],
        ),
      ),
      body: TabBarView(
        controller: this._tabController,
        children: [Center(child: Text('男装')), Center(child: Text('女装'))],
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:demo001/tabbar_custom_full.dart';

/*
 * 自定义TabBarController 
 * 
 */
void main() {
  runApp(MyApp());
}

//自定组件就是类
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("总定义TabBarController使用"),
        ),
        body: TabBarControllerPage(),
      ),
      theme: ThemeData(primarySwatch: Colors.red),
    );
  }
}