Flutter 如何实现GridView选中元素到新页面的过渡动画效果

方案可行性说明 #

你提到的Stack搭配Positioned+AnimatedContainer的方案是可行的，但需要手动计算选中元素的全局坐标、处理动画插值、层级覆盖逻辑，开发成本较高。针对这类跨页面共享元素过渡场景，Flutter官方提供了更成熟的原生组件Hero，可以零成本实现你需要的Grid元素放大跳转、返回缩小的效果，自动处理元素脱离原布局约束的需求。

最优实现步骤（Hero方案） #

1. 给GridView子元素包裹Hero组件 #

每个GridView的item需要指定唯一的tag，作为共享元素的标识：

GridView.builder(
  itemCount: 10,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (context, index) {
    return GestureDetector(
      onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (context) => DetailPage(tag: "item_$index", data: yourItemData)
      )),
      child: Hero(
        tag: "item_$index", // 跳转前后两个页面的tag必须完全一致
        child: YourGridItemWidget(), // 你的Grid子元素布局
      ),
    );
  }
)

2. 详情页对应位置添加同tag的Hero组件 #

详情页的顶部展示元素同样用相同tag的Hero包裹：

class DetailPage extends StatelessWidget {
  final String tag;
  final dynamic data;
  const DetailPage({super.key, required this.tag, required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Hero(
            tag: tag, // 和跳转前Grid元素的tag完全一致
            child: YourDetailHeaderWidget(), // 和Grid元素布局匹配的详情头部
          ),
          // 其他详情内容
        ],
      ),
    );
  }
}

3. 自定义动画效果（可选） #

如果默认的Hero动画不符合你的预期，可以通过flightShuttleBuilder参数自定义过渡动画：

Hero(
  tag: "item_$index",
  flightShuttleBuilder: (flightContext, animation, flightDirection, fromHeroContext, toHeroContext) {
    // 自定义动画插值，比如添加圆角、缩放的曲线效果
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(Tween<double>(begin: 8, end: 0).evaluate(animation)),
          ),
          child: toHeroContext.widget,
        );
      },
    );
  },
  child: YourGridItemWidget(),
)

手动实现Stack+Positioned方案的注意事项 #

如果需要定制更复杂的交互（比如拖拽交互联动过渡），再考虑手动实现，核心逻辑如下：

• 点击元素时通过GlobalKey获取选中item的全局坐标、宽高
• 在顶层Overlay中插入和选中item完全一致的占位组件，隐藏原Grid中的item
• 驱动占位组件的位置、宽高等属性动画到详情页目标位置
• 动画结束后跳转详情页，销毁占位组件

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