列表视图项之间的 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 列表视图中,有没有办法知道用户正在点击的列表项的编号?

Flutter Hero 动画

Flutter Provider-重建列表项而不是列表视图

Flutter:如何在两个小部件之间传递相同的数据?

在页面 flutter,streambuilder,listview 之间导航时列表视图位置丢失

Flutter ListView 与不同的小部件和列表项