列表视图项之间的 Flutter Hero 类似动画
Posted
技术标签:
【中文标题】列表视图项之间的 Flutter Hero 类似动画【英文标题】:Flutter Hero like animation between list view items 【发布时间】:2020-03-02 14:09:30 【问题描述】:英雄般的动画
我有一个标准的 ListView,里面有一些项目。当位置发生变化时,我想以类似 hero 的方式为它们设置动画。我怎样才能做到这一点?感谢您提前回答。
【问题讨论】:
【参考方案1】:简单示例
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: Home(),
));
class Home extends StatelessWidget
final List<String> litems = [
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5",
"Item 6",
"Item 7"
];
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text('Hero List'),
),
body: ListView.builder(
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int index)
return ListTile(
title: Hero(
tag: '$litems[index]__heroTag',
child: Text(
litems[index],
style: Theme.of(context).textTheme.title,
),
),
trailing: IconButton(
icon: Icon(Icons.navigate_next),
onPressed: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ItemScreen(
itemName: litems[index],
)),
);
),
);
,
),
);
class ItemScreen extends StatelessWidget
final String itemName;
const ItemScreen(Key key, @required this.itemName) : super(key: key);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(itemName),
),
body: Container(
child: Center(
child: Hero(
tag: '$itemName__heroTag',
child: Text(
itemName,
style: Theme.of(context).textTheme.title,
),
),
),
),
);
【讨论】:
以上是关于列表视图项之间的 Flutter Hero 类似动画的主要内容,如果未能解决你的问题,请参考以下文章
在 Flutter 列表视图中,有没有办法知道用户正在点击的列表项的编号?