创建tabbarViewController,tabbarIte

1、首先先设定一个页面为首页
①系统默认是在main.dart中创建Index组件为首页，然后Index代码写在main.dart中

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Index(),//这里设置首页
    );
  }
}

class Index extends StatefulWidget {
  @override
  _IndexState createState() => _IndexState();
}

class _IndexState extends State<Index> {
@override
  Widget build(BuildContext context){
    return Scaffold(
          ........省略代码
      )
}

②自己创建首页，其实差不多就是把Index组件的代码自己创建一个新的dart文件，然后代码放进去，名字可以自己定义（文件名和组件名最好相同），别忘记加
import 'package:flutter/material.dart';
然后main.dart中
home: Index()，Index()改成自己的组件名字,
这里不做展示
2、我这里用系统的Index组件，然后在组件里面添加1个BottomNavigationBar，4个BottomNavigationBarItem
①创建4个页面用于点击BottomNavigationBarItem时进行页面切换

4个页面，Community/Discover/Home/Mine

//4个页面初始代码都一样，我这里只展示一个Mine的代码
import 'package:flutter/material.dart';

class mineVC extends StatefulWidget {
  @override
  mineVCState createState() => mineVCState();
}

class mineVCState extends State<mineVC> {
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('我的'),
      ),
    );
  }
}

②Index中添加跳转逻辑
主要就是初始化的时候，创建数组

List<Widget> pages = [];

以及initState中数组添加4个页面，

void initState(){
    pages
      ..add(HomeVC())
      ..add(communityVC())
      ..add(discoverVC())
      ..add(mineVC());
  }

然后在index页面组件中添加body

body: pages[_selectIndex],

Index完整代码如下

class Index extends StatefulWidget {
  @override
  _IndexState createState() => _IndexState();
}

class _IndexState extends State<Index> {
  List<Widget> pages = [];//声明数组
  int _selectIndex = 1;

  @override
  void initState(){//初始化状态中数组添加4个页面
    pages
      ..add(HomeVC())
      ..add(communityVC())
      ..add(discoverVC())
      ..add(mineVC());
  }

  Widget build(BuildContext context){
    return Scaffold(
      body: pages[_selectIndex],//body中展示页面，_selectIndex在点击Item中状态改变进而改变这里

      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '我的'),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "社区"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "发现"),
          BottomNavigationBarItem(icon: Icon(Icons.dashboard_rounded),label: "我的"),
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectIndex,
        fixedColor: Colors.redAccent,
        onTap: _onItemTaped
      ),
    );
  }

  _onItemTaped(int index){//点击Item时触发方法改变_selectIndex
    setState(() {
      _selectIndex = index;
    });
  }
}