Flutter 之Tab切换效果

 1、点击tab实现自由切换页面

一、首先在Flutter中一切皆组件，万物皆组件，都可以用组件来表达

1、创建一个Flutter界面

class MainPage extends StatelessWidget {
  const MainPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TabNavigator();
  }
}

2、在创建TabNavigator组件，继承StatefulWidget，然后使用PageViewBottomNavigationBar 实现滑动和切换

首先重写InitState方法，在了里边初始化需要用到的资源和变量

其次因为PageView需要被控制，所以我们需要创建一个PageController里边传入当前选中的下标

  _controller = PageController(initialPage: _currentIndex);

在实现PageView.Builder事件然后再实现OnPageChanged事件中重新设置setState重新赋值给下标变量

 setState(() {
  _currentIndex = index;
});

在 bottomNavigationBar的参数中实现BottomNavigationBar，currentIndex就是当前选中的下标，<