颤振侧导航动画

问题描述

我正在尝试构建像侧面导航这样的松弛移动应用程序,在这里我们可以向右滑动以露出抽屉,并且当抽屉打开时主体也向右移动。

布局:

堆栈 -抽屉() -Homepage()

在汉堡包图标上单击,我正在使用动画位置移动HomePage()并显示抽屉。

但是我该如何实现类似于pageview之类的东西,其中第一个孩子是Drawer,第二个孩子是Homepage,我可以显示抽屉,但是抽屉的宽度只有0.5 * viewportfraction,因此主页也是露出和变暗。

解决方法

我遇到了同样的问题,我用Stack来解决它,看看 示例:

    Stack(
       children: <Widget>[
           buildPartnerList(context),FilterDrawer(),],),

在FilterDrawer中,我返回了一个animationBuilder

 Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,builder: (context,widget) => buildFilterDrawer(context,widget),);
  }

buildFilterDrawer类似这样

Container(
            color: Theme.of(context).accentColor,width: widthAnimation.value,child: Stack(
              children: <Widget>[
    ...

并制作动画,当我单击侧面的Bar动画时,我有一个GestureDetector。

 _moveFliterDrawerAnimation() {
    setState(() {
      _isExpanded
          ? _animationController.reverse()
          : _animationController.forward();
      _isExpanded = !_isExpanded;
    });
  }