Flutter的TabController和bottomNavigationBar组合使用

使用这两个组件可以快速搭建一个普通App的基本骨架，剩下的就是添加内容了。

废话不多说，直接上效果。

• 之前，学Andoid使用的组件那么费劲，又是fragment，又是Activity。使用TabLayout，在那使劲搭建，没想到Flutter这么简洁，感觉自己像个蠢蛋。但是，yysy，这个编译好慢。代码如下(全部，懒得重新创建文件放首页的内容了)：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  static const String _title = "Flutter Code Sample";

  @override
   Widget build(BuildContext context){
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

第一个大框架的外部创建Widget
class MyStatefulWidget extends StatefulWidget{
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _MyStatefulWidgetState();
}

///最外面的框架的结构
class _MyStatefulWidgetState extends State<MyStatefulWidget>{
  int _selectedIndex = 0;
  static List<Widget> _widget = <Widget>[
    MyStatefulWidget1(),//首页的内容
    Text(
      'index0 :首页',
    ),
    Text(
      'index0 :首页',
    ),
    Text(
      'index0 :首页',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widget.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text(
                "首页",
              style: TextStyle(
                color: Colors.black
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.tv),
            title: Text(
                "频道",
              style: TextStyle(
                color: Colors.black
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text(
                "动态",
              style: TextStyle(
                color: Colors.black
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shop),
            title: Text(
                "会员购",
              style: TextStyle(
                color: Colors.black
              ),
            ),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber,
        onTap: _onItemTapped,
      ),
    );
    }
  void _onItemTapped(int index){
    setState(() {
      _selectedIndex = index;
    });
  }
}

///这是嵌入的首页的内容
///创建的工具
class MyStatefulWidget1 extends StatefulWidget{
  MyStatefulWidget1({Key key}) : super(key: key);

  @override
  MyStatefulWidgetState1 createState() => MyStatefulWidgetState1();
}

///这是首页的内容
class MyStatefulWidgetState1 extends State<MyStatefulWidget1> with SingleTickerProviderStateMixin{
  TabController _tabController;

  void initState(){
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("主页"),
        bottom: TabBar(
          tabs:<Widget> [
            Tab(
              text: '热点',
            ),
            Tab(
              text: '体育',
            ),
            Tab(
              text: '科技',
            ),
          ],
          controller: _tabController,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Center(child: Text('热点')),
          Center(child: Text('体育')),
          Center(child: Text('科技'))
        ],
      ),
    );

  }
  @override
  void dispose() {
    // TODO: implement dispose
    _tabController.dispose();
    super.dispose();
  }
}