我有一个Hero,它有一个子元素我想改变大小作为英雄动画的一部分(在这种情况下,我希望它的宽高比改变)。
这是我的(精简版)构建方法:
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
答案 0 :(得分:0)
由于我现在在家,我现在无法试用你的代码。但我有一个工作英雄动画的例子。试试吧。
// 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();
},
),
),
);
}
}
希望这有帮助。