flutter 实现底部tabBar 页面跳转效果

系统管理员 2023-02-18 09:32 30阅读 0赞

**效果图如下： 点击底部tabBar切换页面**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70]  
**代码如下：**

//主页面底部tabbar
    import 'package:app_ftr/pages/DyPage.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_screenutil/screenutil.dart';
    
    //动态组件
    class IndexPage extends StatefulWidget { 
      IndexPage({ Key key}) : super(key: key);
    
      @override
      _IndexPageState createState() => _IndexPageState();
    }
    
    class _IndexPageState extends State<IndexPage> { 
      //初始化控制器
      PageController _pageController = PageController();
      int _currentIndex = 0; //底部tap高亮下标
    
      void initState() { 
        super.initState();
        //监听控制器滑动变化,改变底部tap
        _pageController.addListener(() { 
          setState(() { 
            _currentIndex = (_pageController.page).round();
          });
        });
      }
    
      @override
      Widget build(BuildContext context) { 
        ScreenUtil.init(context, width: 750, allowFontScaling: false);
        return Scaffold(
          body: _currentPage(),
          //底部导航Bar
          bottomNavigationBar: BottomNavigationBar(
            onTap: (int index) { 
              setState(() { 
                _currentIndex = index;
              });
              //控制器跳转页面
              _pageController.jumpToPage(index);
            },
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            selectedItemColor: Colors.blue,
            unselectedItemColor: Colors.grey,
            currentIndex: _currentIndex,
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
              BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('电影')),
              BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('图书')),
              BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('个人'))
            ]
          ),
        );
      }
    
      //底部对应 页面
      Widget _currentPage() { 
        List _pages = [
          DyPage(), //首页组件渲染页面
          Text('电影'), //下面可自定义页面组件
          Text('图书'),
          Text('个人'),
        ];
    
        return PageView.builder(
          // physics: NeverScrollableScrollPhysics(), //禁用左右滑动
          itemCount: _pages.length,
          controller: _pageController,  //控制器
          itemBuilder: (context, index) => _pages[index]  //构建一个页面实例
        );
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616222517201.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70