31 Hero 动画的使用
1.源代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("头像"),),
body: Center(
child: Builder(builder: (context){
return Ink(
child: InkWell(
child: Hero(
tag: "same",
child: ClipOval(
child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2615855213,1306490928&fm=26&gp=0.jpg", width: 100.0,),
),
),
onTap: () {
Navigator.push(context, PageRouteBuilder(
pageBuilder: (BuildContext context, Animation animation,
Animation secondaryAnimation) {
return FadeTransition(
opacity: animation,
child: Second(),
);
})
);
},
),
);
}),
)
),
);
}
}
class Second extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第二个页面'),
),
body: Center(
child: Hero(
tag: "same",
child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2615855213,1306490928&fm=26&gp=0.jpg"),
),
)
);
}
}
2.解释源代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("头像"),),
body: Center(
child: Builder(builder: (context){
return Ink(
child: InkWell(
child: Hero(
tag: "same",
child: ClipOval(
child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2615855213,1306490928&fm=26&gp=0.jpg", width: 100.0,),
),
),
onTap: () {
Navigator.push(context, PageRouteBuilder(
pageBuilder: (BuildContext context, Animation animation,
Animation secondaryAnimation) {
return FadeTransition(
opacity: animation,
child: Second(),
);
})
);
},
),
);
}),
)
),
);
}
}
class Second extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第二个页面'),
),
body: Center(
child: Hero(
tag: "same",
child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2615855213,1306490928&fm=26&gp=0.jpg"),
),
)
);
}
}
3.效果图