如何为DataTable实现Hero动画？动画失效问题求助

以下是导致Hero动画失效的几个关键问题及修复方案：

1. 修复showSettingFormDialog方法定义错误 #

你的代码中showSettingFormDialog被错误地嵌套定义，导致调用时无法正确传递参数和启动路由。将其改为状态类的直接方法：

void showSettingFormDialog(BuildContext context, Setting setting, {String title = ""}) {
  Navigator.push(
    context,
    HeroDialogRoute(
      horizPadding: 370,
      tag: setting.id,
      title: title,
      builder: (_) => SettingFormWidget(
        setting: setting,
      ),
    ),
  );
}

2. 移除路由的过渡动画干扰 #

HeroDialogRoute中的ScaleTransition会覆盖Hero动画效果，将buildTransitions方法改为直接返回子组件：

@override
Widget buildTransitions(BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation, Widget child) {
  return child; // 移除ScaleTransition，让Hero动画正常生效
}

3. 确保Hero标签完全一致 #

确认源Hero（编辑按钮）和目标Hero（弹窗容器）使用的tag是完全相同的唯一值。你的代码中使用setting.id是可行的，但要保证setting.id不为空且唯一。

完整修复后的关键代码片段 #

修正后的状态类方法 #

class _SettingTableWidgetState extends State<SettingTableWidget> {
  // ... 其他代码保持不变 ...

  void _editRow(Setting s) async {
    SettingState settingState =
        Provider.of<SettingState>(context, listen: false);
    settingState.setCurrent(s);
    showSettingFormDialog(context, s);
  }

  // 修正后的showSettingFormDialog方法
  void showSettingFormDialog(BuildContext context, Setting setting, {String title = ""}) {
    Navigator.push(
      context,
      HeroDialogRoute(
        horizPadding: 370,
        tag: setting.id,
        title: title,
        builder: (_) => SettingFormWidget(
          setting: setting,
        ),
      ),
    );
  }

  // ... 其他代码保持不变 ...
}

修正后的HeroDialogRoute #

class HeroDialogRoute<T> extends PageRoute<T> {
  // ... 其他代码保持不变 ...

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return child; // 移除ScaleTransition
  }

  // ... 其他代码保持不变 ...
}

额外注意事项 #

• 确保CustomRectTween类实现正确，它负责定义Hero动画的矩形过渡路径，如果这个类有问题也会导致动画失效。
• 检查SettingFormWidget是否正确接收并使用setting参数，避免因数据不一致导致的意外问题。

内容的提问来源于stack exchange，提问作者aym1781969