Flutter：如何在英雄动画期间更改子元素的大小？

Posted 2023-02-23

【中文标题】Flutter：如何在英雄动画期间更改子元素的大小？

【英文标题】：Flutter: How to change size of sub-elements durring a hero animation?

【发布时间】：2018-11-03 04:31:17

【问题描述】：

我有一个英雄，它有一个子元素，我想在英雄动画中改变大小（在这种情况下，我希望改变它的纵横比）。

这是我的（精简的）构建方法：

Widget build(BuildContext build) 
  final aspect = expanded ? 1.3 : 1.0;
  return new Hero(
    child: Column(
      children: <Widget>[
      new AspectRatio(
        aspect: aspect,
        child: // Stuff that creates a header
      ),
      new Container(
        child: // General descriptions
      )
    ],
  );

现在，纵横比在两个值之间跳跃。我的问题是，我可以在英雄动画的同时为方面设置动画，并让它慢慢地从 1.3 切换到 1.0 并返回？

有关完整示例（在英雄动画期间还显示了一个奇怪的溢出问题），请参阅以下要点： https://gist.github.com/fuzzybinary/74196bccecc6dd070b35474c4c9223d7

【问题讨论】：

有了这个 sn-p 我无法弄清楚问题是什么。因此，发布您的完整代码，我会尽力为您提供解决方案。

我添加了一个带有完整示例的要点。

即使没有 AspectRatio，我也有同样的问题。在我的情况下，它是两个不同大小的图标。我怀疑这里是否有可能添加缩放动画，因为小部件大小是在转换后设置的（但我不确定）。

【参考方案1】：

由于我现在在我家，所以我现在无法试用您的代码。但我有一个可用的英雄动画示例。试试这个。

// main.dart class
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
import 'package:flutter_test7/photo_hero.dart';
import 'package:flutter_test7/second_page.dart';

class HeroAnimation extends StatelessWidget 
  Widget build(BuildContext context) 
    timeDilation = 2.5; // 1.0 means normal animation speed.

    return new Scaffold(
      appBar: new AppBar(
        title: const Text('Basic Hero Animation'),
      ),
      body: new Center(
        child: new PhotoHero(
          photo: 'images/flippers-alpha.png',
          width: 300.0,
          onTap: () 
            Navigator.of(context).pushNamed('/second_page');
          ,
        ),
      ),
    );
  


void main() 
  runApp(
    new MaterialApp(
      home: new HeroAnimation(),
      routes: <String, WidgetBuilder>
        '/second_page': (context) => new SecondPage()
      ,
    ),
  );


// photo_hero.dart class
import 'package:flutter/material.dart';

class PhotoHero extends StatelessWidget 
  const PhotoHero(Key key, this.photo, this.onTap, this.width)
      : super(key: key);

  final String photo;
  final VoidCallback onTap;
  final double width;

  Widget build(BuildContext context) 
    return new SizedBox(
      width: width,
      child: new Hero(
        tag: photo,
        child: new Material(
          color: Colors.transparent,
          child: new InkWell(
            onTap: onTap,
            child: new Image.asset(
              photo,
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),
    );
  


// second_page.dart class
import 'package:flutter/material.dart';
import 'package:flutter_test7/photo_hero.dart';

class SecondPage extends StatefulWidget 
  @override
  _SecondPageState createState() => new _SecondPageState();


class _SecondPageState extends State<SecondPage> 
  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: const Text('Flippers Page'),
      ),
      body: new Container(
        color: Colors.lightBlueAccent,
        padding: const EdgeInsets.all(16.0),
        alignment: Alignment.topLeft,
        child: new PhotoHero(
          photo: 'images/flippers-alpha.png',
          width: 100.0,
          onTap: () 
            Navigator.of(context).pop();
          ,
        ),
      ),
    );
  

希望这会有所帮助。

【讨论】：

我可以让英雄动画与单个布局子/图像一起工作，但当我组合多个布局子时它不起作用。

@Jeff 你也有同样的问题。我在这里提出了一个问题：github.com/flutter/flutter/issues/17924