具体效果如下：
每一行的信息到详情页的视觉引导效果很自然，Flutter 也为我们提供了这种 Widget 我们要做的第一步就是准备一个列表，和一个详情页
class ListViewContainer extends StatelessWidget {
// 列表页面
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: this.listBuilder,
itemCount: posts.length,
);
}
Widget listBuilder(BuildContext context, int index) {
return ListTile(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => PostInfo(post: posts[index])));
},
leading: CircleAvatar(
backgroundImage: NetworkImage(posts[index].imageUrl),
),
title: Text(posts[index].title),
subtitle: Text(
posts[index].description,
overflow: TextOverflow.ellipsis,
),
);
}
}
class PostInfo extends StatelessWidget {
// 详情页面
final Post post;
PostInfo({@required this.post});
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
),
body: Column(
children: <Widget>[
Image.network(post.imageUrl),
Padding(
padding: EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(post.title, style: Theme.of(context).textTheme.title),
SizedBox(height: 9),
Text(post.author, style: Theme.of(context).textTheme.subhead),
SizedBox(height: 32),
Text(post.description, style: Theme.of(context).textTheme.body1)
],
),
)
],
),
);
}
}
接下来需要做的事情就很简单，在需要过渡的组件上，包裹一层 Hero 组件，需要注意的就是 Hero 组件中的tag一定要与目标页面的 Hero 的 tag 一致，这样 Flutter 才知道是哪两个 Widget 需要过渡效果。
具体如下图所示：
然后通过 hot restart 就可以看到之前看到的效果了！
