列表视图项目之间的Flutter Hero类似动画

英雄动画

我有一个标准ListView,其中包含一些项。当位置改变时,我想以一种英雄的方式为它们设置动画。我该怎么做?感谢您提前提出任何答案。

w406834009 回答:列表视图项目之间的Flutter Hero类似动画

简单的例子

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,);
  }
}
本文链接:https://www.f2er.com/3154562.html

大家都在问