[Feat]: 增加主页面的切换动画

[ErBWs]

issue 内容

主页面的四个选项卡是否可以增加切换动画？就像 FlClash 那样。

我不是很懂 MVC，路由，依赖注入之类的，如果用 PageController 的 animateToPage 实现好像会破坏一些东西

提交前确认

• issue 列表中，没有我的新功能需求 / 问题

[Predidit]

主页面的切换动画应该有两种方法可以调

直接在 index_module.dart 里调 transition

或者在 /lib/page/menu 下面调 PageView.Builder 的 scroller 以及其他属性，这个也能实现一些过渡效果

在我们移除了来自 smart_dialog 的遮罩层并升级到 3.27 之后，动画看上去正常多了，我们确实可以启用更多动画

但是考虑到导航条的存在，我不知道主页这个版本的过渡动画能否达到理想的效果

[ErBWs]

把 side_menu 文件的这段代码：

PageView.builder(
  physics: const NeverScrollableScrollPhysics(),
  itemCount: menu.size,
  onPageChanged: (i) =>
      Modular.to.navigate("/tab${menu.getPath(i)}/"),
  itemBuilder: (_, __) => const RouterOutlet(),
),

修改为：

PageView(
  physics: const NeverScrollableScrollPhysics(),
  controller: _page,
  scrollDirection: Axis.vertical,
  children: const [
    PopularPage(),
    TimelinePage(),
    CollectPage(),
    MyPage(),
  ],
),

并在 onDestinationSelected 内增加：

_page.animateToPage(
  index,
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);

可以获得非常不错的动画，但我不知道这会不会破坏 modular 相关的东西。同时这些页面内的返回手势返回到 popularPage 用的是 Modular.to.navigate，它是没有动画的。而 modular 自身的页面切换动画会显得比较奇怪

Screen-2024-12-20-232506.mp4

[Predidit]

Modular 注册有路由监听器，理论上可以容忍不使用自身方法进行的路由切换，并且不会出现问题。

但是我不想那么做，因为这让路由变得混乱。

Modular 可以自定义过渡动画，虽然很麻烦。

Modular 现有的模板过渡动画的问题是什么？只能实现向单一方向的动画效果，而不是随着目标页面也当前页面在数组中的排序决定向上或者向下吗。

[ErBWs]

Modular 现有的模板过渡动画的问题是什么？只能实现向单一方向的动画效果，而不是随着目标页面也当前页面在数组中的排序决定向上或者向下吗。

是的。另外自定义动画应该很难实现 PageView 中跨多个页面切换会快速经过一遍中间所有页面的效果

[Predidit]

我考虑一下怎么在不破坏现有框架的情况下实现这一效果。

实际上即使在 flutter 第一方实现的 go_router 中，这个效果也不好做。

[ErBWs]

保留 PageView 中的 onPageChanged 来调用 Modular 的切换应该可行，我观察的是终端中 Module INITIALIZED 和 DISPOSED的输出。这种方案也可以解决 #338 的问题

[Predidit]

我的直觉告诉我这个做法很奇怪。你可以检查一下 IDE 里的 flutter 组件树，我不知道这样会不会堆积多个相同的页面。

这个问题的本质是我们将这四个板块当做一条完整的路由 /tab 来处理，还是当作四条不同的子路由来处理。

只能说各有取舍，我觉得拆分能让结构清晰一些，但是这样动画不好做。

[Predidit]

我们可能没有办法在不破坏当前路由结构的情况下，实现这个转换效果

因为这个效果的本质根本不是路由转换动画，而且tab之间的过渡动画。就像一个标准的tabView那样。

这种情况下 /tab 是一条完整的路由，我们也没有办法卸载四个页面中的未在使用的三个。

[ErBWs]

我的直觉告诉我这个做法很奇怪。你可以检查一下 IDE 里的 flutter 组件树，我不知道这样会不会堆积多个相同的页面。

不会，但是 popularPage 会一直保留，而其他三个页面会随着标签切换而出现和消失

[ErBWs]

[Predidit]

搞不明白这个实现为什么在工作。也许要再翻一下 modular 的源码。

这完全是我的技术问题, 但是从结论上说, 我暂时审查不了包含这种实现的PR。