(译)在路由上设置widget动画

栏目: ASP.NET · 发布时间: 6年前

内容简介：在路由之间导航时，引导用户浏览我们的应用通常很有帮助。引导用户浏览应用程序的常用技巧是将Widget以动画的形式从一个路由到下一个路由。这创建了连接两个路由的视觉锚点。我们如何使用Flutter将Widget以动画的形式从一个路由到下一个路由？使用

原文链接

在路由之间导航时，引导用户浏览我们的应用通常很有帮助。引导用户浏览应用程序的常用技巧是将Widget以动画的形式从一个路由到下一个路由。这创建了连接两个路由的视觉锚点。

我们如何使用Flutter将Widget以动画的形式从一个路由到下一个路由？使用 Hero widget！

步骤

Hero
Hero

1.创建两个显示相同图像的路由

在此示例中，我们将在两个路由上显示相同的图像。当用户点击图像时，我们希望将图像以动画的形式从一个路由到下一个路由。现在，我们将创建视觉结构，并在接下来的步骤中处理动画！

注意：此示例基于导航到新路由并返回和处理点击事件配方。

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return DetailScreen();
          }));
        },
        child: Image.network(
          'https://picsum.photos/250?image=9',
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

2.将Hero Widget添加到第一个路由

为了将两个屏幕与动画连接在一起，我们需要将Image Widget包装在Hero Widget的两个路由上。 Hero Widget需要两个参数：

tag：标识Hero的对象。两个路由上必须相同。
child：我们想要在路由之间实现动画效果的widget。

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
);

3.将Hero Widget添加到第二个路由

要完成与第一个路由的连接，我们需要使用Hero Widget将Image包装在第二个路由上！它必须使用与第一个路由相同的标签。

将Hero Widget应用到第二个路由后，路由之间的动画将起作用！

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
);

注意：此代码与我们在第一个路由上的代码相同！通常，您可以创建可重用的Widget而不是重复代码，但是对于此示例，我们将复制代码以用于演示目的。

完整例子

import 'package:flutter/material.dart';

void main() => runApp(HeroApp());

class HeroApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Transition Demo',
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return DetailScreen();
          }));
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

(译)在路由上设置widget动画

Previous

(译)发送数据到新路由

以上所述就是小编给大家介绍的《(译)在路由上设置widget动画》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

C++程序设计语言

Bjarne Stroustrup / 裘宗燕 / 机械工业出版社 / 2010-3-1 / 99.00元

本书是在C++语言和程序设计领域具有深远影响、畅销不衰的著作，由C++语言的设计者编写，对C++语言进行了最全面、最权威的论述，覆盖标准C++以及由C++所支持的关键性编程技术和设计技术。本书英文原版一经面世，即引起业内人士的高度评价和热烈欢迎，先后被翻译成德、希、匈、西、荷、法、日、俄、中、韩等近20种语言，数以百万计的程序员从中获益，是无可取代的C++经典力作。在本书英文原版面世10年......一起来看看《C++程序设计语言》这本书的介绍吧!

码农工具