Flutter实现iOS TabBarController效果和android TabHost效果_flutter tabbarcontroller

先上截图， 如何实现下图的效果呢。

对于iOS开发者，我们可以使用UITabBarController来实现,

对于android开发者,我们可以使用FragmentTabHost来实现。在Flutter中并没有这两个控件，进入正题，我们看看在Flutter中我们如何使用Flutter中的PageView来实现这种效果。

1.相关 API

通过查看Flutter中PageController的API，我们可以发现其中几个重要的api

2.实现步骤

1.初始化PageView，创建相应的页面。

  final _defalutColor = Colors.grey; //默认选中的文字颜色
  final _activeColor = Colors.blue;  //点击之后的文字颜色
  int _currentIndex = 0;             //当前选中的下标
  final PageController _controller = PageController(
    initialPage: 0,//默认起始页
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: <Widget>[
          HomePage(),
          SearchPage(),
          DiscoverPage(),
          MyPage(),
        ],
      ),    
    )
  }

2.设置bottomNavigationBar的属性

type:（选中时候文字显示方式）,onTap方法(选中相应方法)，items(BottomNavigationBarItem泛型的数组，用于配置相应的图片，标题等属性)。相关代码如下：

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
          currentIndex: _currentIndex,//当前选中的是哪一个
          onTap: (index){
            _controller.jumpToPage(index);
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
        BottomNavigationBarItem(
          icon: Icon(
            Icons.home,
            color: _defalutColor,
          ),
          activeIcon: Icon(
            Icons.home,
            color: _activeColor,),
        title: Text('首页',style: TextStyle(
          color: _currentIndex != 0?_defalutColor:_activeColor
        ),)
        ),
        BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
              color: _defalutColor,
            ),
            activeIcon: Icon(
              Icons.search,
              color: _activeColor,),
            title: Text('搜索',style: TextStyle(
                color: _currentIndex != 1?_defalutColor:_activeColor
            ),)
        ),BottomNavigationBarItem(
            icon: Icon(
              Icons.camera_alt,
              color: _defalutColor,
            ),
            activeIcon: Icon(
              Icons.camera_alt,
              color: _activeColor,),
            title: Text('发现',style: TextStyle(
                color: _currentIndex != 2?_defalutColor:_activeColor
            ),)
        ),BottomNavigationBarItem(
            icon: Icon(
              Icons.account_circle,
              color: _defalutColor,
            ),
            activeIcon: Icon(
              Icons.account_circle,
              color: _activeColor,),
            title: Text('我的',style: TextStyle(
                color: _currentIndex != 3?_defalutColor:_activeColor
            ),)
        ),
      ]),

目录

1.PageController相关 API

2.实现步骤

3.完整的代码地址