Flutter 搭建常见的tabbarview主界面

方法一：tabbarview

参考github开源项目：https://github.com/alibaba/flutter-go

代码如下：

/**
 * @Author: czy
 * @Description：
 * @Date: 2019-05-27
 */

import 'package:flutter/material.dart';
import 'child_page.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  TabController controller;
  static List tabData = [
    {'text': '业界动态', 'icon': new Icon(Icons.language)},
    {'text': 'WIDGET', 'icon': new Icon(Icons.extension)},
    {'text': '组件收藏', 'icon': new Icon(Icons.favorite)},
    {'text': '关于手册', 'icon': new Icon(Icons.import_contacts)}
  ];
  List<Widget> myTabs = [];
  
  @override
  void initState() {
    super.initState();
    controller = TabController(length: tabData.length, vsync: this, initialIndex: 0);

    print('tabData ${tabData.length.toString()}');
    for (int i = 0; i < tabData.length; i++) {
      print(tabData[i]['text']);
      myTabs.add(Tab(text: tabData[i]['text'], icon: tabData[i]['icon']));
      print(myTabs.length.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('xxxx'),
        elevation: 0,
      ),
      body: TabBarView(
        children: [
          ChildPage(Colors.lightGreen),
          ChildPage(Colors.black45),
          ChildPage(Colors.cyan),
          ChildPage(Colors.deepPurpleAccent)
        ],
        controller: controller,
      ),
      bottomNavigationBar: Material(
        color: const Color(0xFFF0EEEF), //底部导航栏主题颜色
        child: SafeArea(
          child: Container(
            height: 65.0,
            decoration: BoxDecoration(
              color: const Color(0xFFF0F0F0),
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: const Color(0xFFd0d0d0),
                  blurRadius: 3.0,
                  spreadRadius: 2.0,
                  offset: Offset(-1.0, -1.0),
                ),
              ],
            ),
            child: TabBar(
              controller: controller,
              labelColor: Theme.of(context).primaryColor,
              unselectedLabelColor: const Color(0xFF8E8E8E),
              tabs: myTabs
            ),
          ),
        ),
      ),
    );
  }

}

效果如下：

运行效果.gif

方式二：IndexedStack

参考github开源项目：https://github.com/Mayandev/morec

代码如下：

/**
 * @Author: czy
 * @Description：
 * @Date: 2019-05-28
 */

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'child_page.dart';

class Home2Page extends StatefulWidget {
  @override
  _Home2PageState createState() => _Home2PageState();
}

class _Home2PageState extends State<Home2Page> {
  int _tabIndex = 0;

  static List tabData = [
    {'text': '业界动态', 'icon': new Icon(Icons.language)},
    {'text': 'WIDGET', 'icon': new Icon(Icons.extension)},
    {'text': '组件收藏', 'icon': new Icon(Icons.favorite)},
    {'text': '关于手册', 'icon': new Icon(Icons.import_contacts)}
  ];
  List<BottomNavigationBarItem> myTabs = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < tabData.length; i++) {
      myTabs.add(BottomNavigationBarItem(icon: tabData[i]['icon'], title: Text(tabData[i]['text'])));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('xxxxx')),
      body: IndexedStack(
        children: <Widget>[
          ChildPage(Colors.lightGreen),
          ChildPage(Colors.black45),
          ChildPage(Colors.cyan),
          ChildPage(Colors.deepPurpleAccent)
        ],
        index: _tabIndex,
      ),
      bottomNavigationBar: CupertinoTabBar(
        backgroundColor: Colors.white,
        activeColor: Theme.of(context).primaryColor,
        currentIndex: _tabIndex,
        items: myTabs,
        onTap: (index) {
          setState(() {
            _tabIndex = index;
          });
        },
      ),
    );
  }
}

方式三：PageView

代码：

/**
 * @Author: czy
 * @Description：
 * @Date: 2019-05-28
 */

import 'package:flutter/material.dart';
import 'child_page.dart';

class Home3Page extends StatefulWidget {
  @override
  _Home3PageState createState() => _Home3PageState();
}

class _Home3PageState extends State<Home3Page> with SingleTickerProviderStateMixin {
  TabController tabController;
  PageController pageController;
  static List tabData = [
    {'text': '业界动态', 'icon': new Icon(Icons.language)},
    {'text': 'WIDGET', 'icon': new Icon(Icons.extension)},
    {'text': '组件收藏', 'icon': new Icon(Icons.favorite)},
    {'text': '关于手册', 'icon': new Icon(Icons.import_contacts)}
  ];
  List<Widget> myTabs = [];

  @override
  void initState() {
    super.initState();
    pageController = PageController();
    tabController = TabController(length: tabData.length, vsync: this, initialIndex: 0);
    
    for (int i = 0; i < tabData.length; i++) {
      myTabs.add(Tab(text: tabData[i]['text'], icon: tabData[i]['icon']));
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('xxxx'),
        elevation: 0,
      ),
      body: new PageView(
        controller: pageController,
        onPageChanged: (index) {
          tabController.animateTo(index);
        },
        children: [
          ChildPage(Colors.lightGreen),
          ChildPage(Colors.black45),
          ChildPage(Colors.cyan),
          ChildPage(Colors.deepPurpleAccent)
        ],
      ),
      bottomNavigationBar: Material(
        color: const Color(0xFFF0EEEF), //底部导航栏主题颜色
        child: SafeArea(
          child: Container(
            height: 65.0,
            decoration: BoxDecoration(
              color: const Color(0xFFF0F0F0),
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: const Color(0xFFd0d0d0),
                  blurRadius: 3.0,
                  spreadRadius: 2.0,
                  offset: Offset(-1.0, -1.0),
                ),
              ],
            ),
            child: TabBar(
                controller: tabController,
                labelColor: Theme.of(context).primaryColor,
                unselectedLabelColor: const Color(0xFF8E8E8E),
                tabs: myTabs,
                onTap: (index) {
                  pageController.jumpTo(MediaQuery.of(context).size.width * index);
                },
            ),
          ),
        ),
      ),
    );
  }
}