Flutter学习案例分享-动画案例Hero基本使用

Hero基本使用

• 在Flutter中Hero是一种使widget从一个页面“飞”到另一个页面的动画效果，在过程中大小和形状都会根据设置发生变化。Flutter框架会自动处理这些过渡。

• 在本学习案例中，把LIstTile中的图标使用Hero动画效果过渡到详细信息的页面上，展示更大图标。

IOS下运行程序

创建项目 

• 在lib目录下创建一个list_page.dart文件。

• 使用StatelessWidget，添加一个List<String>列表，用来表示列表标题。

• 在body中使用ListView.builder，给他一个int类型的参数，在Hero中会用到，返回一个ListTile()。

• 在ListTile中使用Hero，首先给出一个tag标签，它的作用用于标记当前页面和需要跳转的页面找到相同的标签，才会产生一个动画过渡效果。

• 接下来在onTap中导航到详情页面。

完整代码

import 'package:animation_dome/detail_page.dart';
import 'package:flutter/material.dart';

class ListPage extends StatelessWidget {
  ListPage({Key? key}) : super(key: key);
  final List<String> drinks = [
    '咖啡',
    '红茶',
    '卡布奇诺',
    '饮料',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hero Animation'),
      ),
      body: ListView.builder(
        itemCount: drinks.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: Hero(tag: 'cup$index', child: Icon(Icons.free_breakfast)),
            title: Text(drinks[index]),
            onTap: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => DetailPage(index)));
            },
          );
        },
      ),
    );
  }
}

• 接下来创建一个detail_page.dart详情页面

• 使用StatelessWidget并声明一个int类型的索引参数。

• 在Expanded中的flex1中接收标签.代码中flex2只是一个空容器

• 完整代码

import 'package:flutter/material.dart';

class DetailPage extends StatelessWidget {
  final int index;
  const DetailPage(this.index, {super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('详情页面'),
      ),
      body: Column(
        children: [
          Expanded(
            flex: 1,
            child: Container(
              width: double.infinity,
              decoration: const BoxDecoration(
                color: Colors.blue,
              ),
              child: Hero(
                  tag: 'cup$index',
                  child: const Icon(
                    Icons.free_breakfast,
                    size: 80,
                  )),
            ),
          ),
          const Spacer(
            flex: 2,
          )
        ],
      ),
    );

• 最后在main文件中引用ListPage

import 'package:animation_dome/list_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: ListPage(),
    );
  }
}