(译)在路由上设置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动画》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

Head First HTML与CSS（第2版）

Elisabeth Robson、Eric Freeman / 徐阳、丁小峰 / 中国电力出版社 / 2013-9 / 98.00元

是不是已经厌倦了那些深奥的HTML书？你可能在抱怨，只有成为专家之后才能读懂那些书。那么，找一本新修订的《Head First HTML与CSS（第2版）》吧，来真正学习HTML。你可能希望学会HTML和CSS来创建你想要的Web页面，从而能与朋友、家人、粉丝和狂热的顾客更有效地交流。你还希望使用最新的HTML5标准，能够保证随时间维护和扩展你的Web页面，使它们在所有浏览器和移动设备中都能正常工......一起来看看《Head First HTML与CSS（第2版）》这本书的介绍吧!

码农工具