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就是当前选中的下标，

type这是为Fixed一直显示，onTap事件在跳转Page和赋值Index，最后items传入对应得图标和文字

以下是源代码：

/*@ClassName: TabNavigator
 *@Author: wanXiaoFan
 *@Date: 2021/8/30 15:46
 *@Email: wanyunfei_it@163.com
 *@Description: 导航栏
 *@changeRecord [修改记录]<br />
 */
class TabNavigator extends StatefulWidget {
  const TabNavigator({Key key}) : super(key: key);

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

class _TabNavigatorState extends State<TabNavigator> {
  var _currentIndex = 0;
  PageController _controller;
  final _pages = [HomePage(), CarPage(), LivePage(), StarPage(), UserPage()];

  @override
  void initState() {
    super.initState();

    _controller = PageController(initialPage: _currentIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        itemBuilder: (BuildContext context, int index) {
          return _pages[index];
        },
        //禁止滑动
        physics: NeverScrollableScrollPhysics(),
        controller: _controller,
        onPageChanged: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          _controller.jumpToPage(index);
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Image.asset(
              "image/main/ic_home_normal.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            activeIcon: Image.asset(
              "image/main/ic_home_pressed.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            title: Text(
              "首页",
              style: TextStyle(
                  color: _currentIndex != 0
                      ? Color(AppColors.navBarNormal)
                      : Color(AppColors.navBarPressed)),
            ),
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              "image/main/ic_car_normal.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            activeIcon: Image.asset(
              "image/main/ic_car_pressed.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            title: Text(
              "选车",
              style: TextStyle(
                  color: _currentIndex != 1
                      ? Color(AppColors.navBarNormal)
                      : Color(AppColors.navBarPressed)),
            ),
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              "image/main/ic_live_normal.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            activeIcon: Image.asset(
              "image/main/ic_live_pressed.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            title: Text(
              "直播",
              style: TextStyle(
                  color: _currentIndex != 2
                      ? Color(AppColors.navBarNormal)
                      : Color(AppColors.navBarPressed)),
            ),
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              "image/main/ic_star_normal.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            activeIcon: Image.asset(
              "image/main/ic_star_pressed.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            title: Text(
              "星球",
              style: TextStyle(
                  color: _currentIndex != 3
                      ? Color(AppColors.navBarNormal)
                      : Color(AppColors.navBarPressed)),
            ),
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              "image/main/ic_user_normal.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            activeIcon: Image.asset(
              "image/main/ic_user_pressed.png",
              width: AppColors.navBarIconSize,
              height: AppColors.navBarIconSize,
            ),
            title: Text(
              "我的",
              style: TextStyle(
                  color: _currentIndex != 4
                      ? Color(AppColors.navBarNormal)
                      : Color(AppColors.navBarPressed)),
            ),
          )
        ],
      ),
    );
  }
}