Flutter 的选项卡+控制器 实现多视图控制

方法一:TabBar + TabController

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  List<Tab> _tabs;
  TabController _controller;

  Widget _tabContent;
  VoidCallback onChanged;
  int _currentIndex;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    //初始化_tabs;
    _tabs = [
      Tab(text: 'TAB1'),
      Tab(text: 'TAB2'),
    ];

    //初始化当前
    _tabContent = Container();
    _controller = TabController(length: _tabs.length, vsync: this);
    onChanged = () {
      setState(() {
        _currentIndex = _controller.index;
        if (_currentIndex == 0) {
          _tabContent = Container(
            child: Text("TAB1"),
          );
        } else {
          _tabContent = Container(
            child: Text("TAB2"),
          );
        }
      });
    };
    _controller.addListener(onChanged);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _controller.removeListener(onChanged);
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            SizedBox(height: 20,child: Container()),
            Container(
              //tabs背景色
              color: Colors.green,
              child: TabBar(
                //label字体颜色
                labelColor: Colors.yellow,
                indicatorWeight: 3.0,
                indicatorSize: TabBarIndicatorSize.tab,
                labelStyle: TextStyle(fontSize: 16.0, color: Colors.black12),
                controller: _controller,
                tabs: _tabs,
                // indicatorColor: Theme.of(context).primaryColor,
              ),
            ),
            _tabContent,
          ],
        ),
      ),
    );
  }
}

方法二:BottomNavigationBar

import 'package:flutter/material.dart';
import 'ir_manager_page.dart';
import 'editor_page.dart';
import 'tools_manager_page.dart';
import 'mine_page.dart';
class MainNavigationWidget extends StatefulWidget {
  @override
  _MainNavigationWidgetState createState() => _MainNavigationWidgetState();
}

class _MainNavigationWidgetState extends State<MainNavigationWidget> {
  
  int _currentIndex = 0;
  List<Widget> list = List();
  var tabImages;
  var appBarTitles = ['编辑', 'IR管理','工具' ,'我的'];

 /*
   * 根据选择获得对应的normal或是press的icon
   */
  Image getTabIcon(int curIndex) {
    if (curIndex == _currentIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }

  /*
   * 获取bottomTab的颜色和文字
   */
  Text getTabTitle(int curIndex) {
    if (curIndex == _currentIndex) {//选择tab的文字属性设置
      return new Text(appBarTitles[curIndex],
          style: new TextStyle(fontSize: 14.0, color: const Color(0xff1296db)));
    } else {//非选择tab的文字属性设置
      return new Text(appBarTitles[curIndex],
          style: new TextStyle(fontSize: 14.0, color: const Color(0xff515151)));
    }
  }

  /*
   * 根据image路径获取图片
   */
  Image getTabImage(path) {
    return new Image.asset(path, width: 24.0, height: 24.0);
  }

  @override
  void initState() {
    list
      ..add(HTEditorPage())
      ..add(HTIRManagerPage())
      ..add(HTToolsManagerPage())
      ..add(HTMinePage());

      //tab项图片
      tabImages = [
      [getTabImage('assets/images/editor.png'), getTabImage('assets/images/editor_selected.png')],
      [getTabImage('assets/images/ir.png'), getTabImage('assets/images/ir_selected.png')],
      [getTabImage('assets/images/tool.png'), getTabImage('assets/images/tool_selected.png')],
      [getTabImage('assets/images/mine.png'), getTabImage('assets/images/mine_selected.png')]
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: list[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
            onTap: (int index) {
              setState(() {
                _currentIndex = index;
              });
            },
            currentIndex: _currentIndex,
            showUnselectedLabels:true,
            type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                  icon: getTabIcon(0), title: getTabTitle(0)),
              BottomNavigationBarItem(
                  icon: getTabIcon(1), title: getTabTitle(1)),
              BottomNavigationBarItem(
                  icon: getTabIcon(2), title: getTabTitle(2)),
               BottomNavigationBarItem(
                  icon: getTabIcon(3), title: getTabTitle(3)),
            ]));
  }
}