Flutter 实现自定义侧滑--side menu

实现效果

在这里插入图片描述

项目源码

对flutter中的动画不了解的可以看这篇 Flutter 动画入门

实现

  • 首先将界面拆解成两部分 menu 和 homePage 使用Stack组件将两者包裹起来(类似使用FrameLayout)
return Scaffold(
  backgroundColor: backgroundColor,
  body: Stack(
    children: <Widget>[menu(context), homePage(context)],
  ),
);
menu
  • menu的动画可以分解成两部分:
    • 平移:从左侧推入
    • 缩放:从0.0放大至1.0
  • menu动画初始化如下:
// 初始化menu缩放动画,从0.0放大至1.0
_menuScaleAnimation =
    Tween<double>(begin: 0.0, end: 1).animate(_controller);
// 初始化page平移动画,从左侧推入
_slideAnimation = Tween<Offset>(begin: Offset(-1, 0), end: Offset(0, 0))
    .animate(_controller);
  • menu动画具体使用
return SlideTransition(
  // 设置平移动画
  position: _slideAnimation,
  child: ScaleTransition(
    scale: _menuScaleAnimation,
    ...
    )
)
  • 关于推进动画,下图说明
    在这里插入图片描述

homePage

  • homePager的动画分为两部分

    • 平移:平移伴随着尺寸的变化
    • 缩放:从1.0缩小至0.8
  • homePage动画初始化如下:

// 初始化page缩放动画,从1.0缩小至0.8
_pagescaleAnimation = Tween<double>(begin: 1, end: 
0.8).animate(_controller);
  • homePage动画具体使用
return AnimatedPositioned(
// AnimatedPositioned尺寸随着平移动画变化(只有Stack的child才会生效)
  duration: duration,
  top: 0,
  bottom: 0,
// homePage左边缘距离屏幕距离
  left: isCollapsed ? 0 : 0.6 * screenWidth,
// homePage右边缘距离屏幕距离
  right: isCollapsed ? 0 : -0.4 * screenWidth,
  child: ScaleTransition(
    // 设置滑动的缩放动画
    scale: _pagescaleAnimation,
    ...
    )
)
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值