【自学Flutter】31 Hero 动画的使用

在Flutter中，Hero动画用于实现页面间的转场动画，尤其是在列表到详情页的过渡中非常常见。以下是一个简单的Hero动画的实现示例：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3'];
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Hero(
            tag: items[index],
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailsPage(item: items[index]),
                    ),
                  );
                },
                child: Container(
                  padding: EdgeInsets.all(10.0),
                  child: Text(items[index]),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}
 
class DetailsPage extends StatelessWidget {
  final String item;
 
  DetailsPage({this.item});
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Page'),
      ),
      body: Center(
        child: Hero(
          tag: item,
          child: Material(
            color: Colors.blue,
            child: Text(
              item,
              style: TextStyle(color: Colors.white, fontSize: 32),
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个HomePage，它包含一个列表。列表中的每一项都使用Hero组件包裹，并且设置了相同的tag。当用户点击其中一个项时，它会导航到DetailsPage，并且列表中被点击的项会开始Hero动画，从HomePage过渡到DetailsPage。在DetailsPage中，我们使用了具有相同tag的Hero组件来包裹文本，以确保动画能够正确进行。