Kazumi [Enhancement] 为 menuanchor 组件添加动画

在 flutter 3.35 版本中，新的 RawMenuAnchor 组件已经可用，提供了更精细的控制与优雅的动画

参考 flutter/flutter#167806

@ErBWs 这部分的代码所有者是你，有兴趣完成这项工作吗

Aug 15 '25 04:08 Predidit

看上去不错，不过可能需要花上些时间来做这个工作，我需要考虑一下如何在适配到 ohos 时不用修改过多内容，ohos 目前较完善的最高版本是 3.27.4，刚开始做 3.32 的适配

另外我现在在做这个工作，不知道你觉得怎么样

https://github.com/user-attachments/assets/392431f3-2588-4d84-a59d-bfa85e61ce0b

Aug 15 '25 05:08 ErBWs

看上去相当不错，这样也和播放器内的弹幕样式设置保持了相同的逻辑

不过应该需要考虑一下将两者的风格同步，具体采用哪种 Slider 风格由你来决定，我对自己的审美有些没有自信

Aug 15 '25 05:08 Predidit

Slider 风格和 ProgressIndicator 相同都可以通过全局配置为最新的 m3 风格

Aug 15 '25 05:08 ErBWs

尝试了一下，想要实现可能有点困难，需要创建一个对 RawMenuAnchor 的包装，就像官方提供的 MenuAnchor 那样。但是官方的包装实现了自动调整菜单出现位置，我不知道是怎么做到的

另外一个问题就是如何做到 SubMenu 的嵌套

https://github.com/user-attachments/assets/915fd516-9a6a-4be0-8eca-69e55b1efc6b

Aug 16 '25 07:08 ErBWs

我也不了解这个组件，但上面提到的 PR 中的演示似乎就有 submenu

Aug 16 '25 07:08 Predidit

有点超出我的能力了，不知道该怎么自动调整出现位置

演示中的 submenu 是 RawMenuAnchor 套 RawMenuAnchor 实现的，需要大幅修改 player_item_panel 实现，但 MenuAnchor 中的 SubMenuButton 貌似不是

Aug 16 '25 08:08 ErBWs

🤣

直接把整个 MenuAnchor 复制出来然后加动画的效果

https://github.com/user-attachments/assets/197b62f4-7039-4945-ab9a-addd04de3cbd

Aug 17 '25 04:08 ErBWs

意外地有用，除了定位可能有一些问题，我记得 menuanchor 没有动画相关的属性，怎么做到的。

Aug 17 '25 04:08 Predidit

MenuAnchor 实际上就是基于 RawMenuAnchor 的包装，所以直接整个复制为新文件根据 RawMenuAnchor 的最新文档增加动画。

目前用的 SizeTransition，看上去因为 size 的变化会导致定位功能的跳跃。使用 FadeTransition 可行，但是不够符合 md3 动画，md3 的 menu 动画有一个明显的大小变化

https://m3.material.io/components/menus/guidelines#34ff1f8d-39cc-4fd1-aa63-47b57c385274

Aug 17 '25 04:08 ErBWs

@ErBWs I submitted a PR for MenuAnchor animations that should fix the layout jumping: https://github.com/flutter/flutter/pull/176494. Let me know if the layout bug persists. Also, very cool app! My wife loves anime, so I'll have to show her.

https://github.com/user-attachments/assets/224b94f8-acee-4ecf-a4b5-7a9989dcd59f

Oct 11 '25 23:10 davidhicks980

FlClash 有一个自定义 popup 组件，看着相当不错，不过不如这个 menu anchor 动画 PR 更贴近 md3 的规范

https://github.com/chen08209/FlClash/blob/2395a4b20c838f423a37dbf9637b9e9eaea06940/lib/widgets/popup.dart

https://github.com/user-attachments/assets/4e57f9c1-c234-46be-aa8f-f9dcac21370e

Oct 13 '25 07:10 ErBWs

这个组件一点也不是 material

我昨天刚手搓了一个 custom_dropdown_menu.dart 来解决 #1322

也许我们可以在那个的基础上进行工作

Oct 13 '25 07:10 Predidit

我觉得可以考虑将 https://github.com/flutter/flutter/pull/176494 中 package/flutter/lib/src/material 的修改生成 patch，在构建的时候应用这个 patch 来实现效果，等这个 PR 合并并发布 release 应该需要很久

Oct 13 '25 07:10 ErBWs

我不建议对 flutter 框架使用 patch ，这引入了太多的复杂度，并且会让用户从源码构建的 kazumi 和发行版的 kazumi 行为不一致

Oct 13 '25 07:10 Predidit