flutter实现微信tabbar与页面联动

777 阅读1分钟

PS:网上找了很多教程,发现大部分源码都是有缺陷的,所以自己动手撸了一个 废话少说,上源码

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart'; //如果报错那么证明大概可能你没有引入这个插件

import './page/cart.dart';
import './page/classify.dart';
import './page/home.dart';
import './page/mine.dart';
//这里就是传说中的四个页面
void main() => runApp(MaterialApp(
      home: BottomNavBar(),
    ));

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  PageController controller;
  int _page = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    controller = PageController(
        //初始化一下
      initialPage: _page, //默认在第几个
      viewportFraction: 1, // 占屏幕多少,1为占满整个屏幕
      keepPage: true, //是否保持当前页面状态
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          key: _bottomNavigationKey,
          index: this._page,
          height: 50.0,
          items: <Widget>[
            Icon(
              Icons.home,
              size: 30,
              color: Colors.white,
            ),
            Icon(
              Icons.list,
              size: 30,
              color: Colors.white,
            ),
            Icon(
              Icons.add_shopping_cart,
              size: 30,
              color: Colors.white,
            ),
            Icon(
              Icons.supervised_user_circle,
              size: 30,
              color: Colors.white,
            ),
          ],
          color: Color.fromRGBO(234, 81, 127, 1),
          buttonBackgroundColor: Color.fromRGBO(238, 63, 77, 1),
          backgroundColor: Color.fromRGBO(233, 215, 223, 0),
          animationCurve: Curves.fastOutSlowIn,
          animationDuration: Duration(milliseconds: 300),
          onTap: (index) {
            setState(() {
              _page = index;
              this.controller.animateToPage(
                    _page, //跳转到的位置
                    duration: Duration(milliseconds: 2), //跳转的间隔时间
                    curve: Curves.fastOutSlowIn, //跳转动画
                  );
            });
          },
        ),
        body: PageView(
          controller: this.controller,
          onPageChanged: (index) {
          //这里注意下
            setState(() {
              _page = index;
            });
          },
          children: <Widget>[Home(), Classify(), Cart(), Mine()],
        ));
  }
}