flutter 实现底部tabBar 页面跳转效果_flutter pagecontroller.addlistener

效果图如下： 点击底部tabBar切换页面

代码如下：

//主页面底部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]  //构建一个页面实例
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74