关于flutter:Flutter-HeroMode-Widget-动画转场组件

原文

https://medium.com/flutterdev...

代码

https://github.com/flutter-de...

参考

https://flutter.dev

注释

在 Flutter 中，Flutter 应用程序屏幕上的每个组件都是一个小工具。屏幕的透视图齐全依赖于用于构建应用程序的小部件的抉择和分组。此外，利用程序代码的构造是一个小部件树。

在本博客中，咱们将理解 HeroMode 小部件及其在 flutter 中的性能。咱们将在这个 HeroMode 小部件的演示程序的实现中看到。

“ Flutter 是谷歌的 UI 工具包，它能够帮忙你在创纪录的工夫内用一个代码库为挪动设施、网络和桌面构建丑陋的本地组合应用程序。”

它是收费和开源的。它最后是由谷歌倒退而来，目前由 ECMA 规范监管。 Flutter 应用程序利用达特编程语言来制作应用程序。这个 dart 编程和其余编程语言有一些雷同的亮点，比方 Kotlin 和 Swift，并且能够被转换成 JavaScript 代码。

如果你想摸索更多对于 Flutter ，请拜访 Flutter 的官方网站，以取得更多的信息。 Flutter’s official website
以下这些公司和产品正在应用 Flutter —— Flutter 展现

HeroMode 小部件

Hero 小部件是一个平凡的开箱即用的动画，用于通信小部件从一个页面飞到另一个页面的导航动作。英雄动画是两个不同页面之间共享的元素过渡(动画)。当初来看看这个，设想一个超级英雄在口头中航行。例如，您必须有一个图像列表。当咱们用英雄标签包装它的时候。当初咱们点击一个我的项目清单。而且当被敲击时。而后图像列表我的项目的土地其地位在具体页面。当咱们勾销它并返回到列表页面，而后 hero 小部件返回到它的页面。

HeroMode 小部件具备动画性能，能够在两个屏幕之间启用或禁用元素。基本上，当你想禁用 Hero 小部件的动画性能时，这个小部件是必须的。如果您想理解 Hero 模式小部件，那么首先您须要理解 Hero 小部件。

是 Hero 小部件的一部分，引入这个小部件的目标是启用和禁用 Hero 小部件的动画---- 如果你不想在两个屏幕之间动画元素，而后用 HeroMode 小部件包装 Hero 小部件，咱们能够通过应用它们的动态属性或动静地启用和禁用它们，而后通过包装这个小部件，当你认真看上面的例子视频时产生了什么，那么你就能够看到这个动画中的可掂量的区别。

演示模块:

如何实现 dart 文件中的代码:

你须要别离在你的代码中实现它:

首先，我为汇合创立了一个 ViewModel 类，并在开关按钮上取得一个布尔值。这是我在 HeroMode Widget 中通过的。

bool _isHeroModeEnable= true;bool get isHeroModeEnable => _isHeroModeEnable;set isHeroModeEnable(bool value) {  _isHeroModeEnable = value;}

当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

而后，我必须增加一个文本和开关按钮来显示 HeroMode 小部件的启用和禁用性能。

Widget buildCategoriesSection() {  return Container(    padding: EdgeInsets.only(left: 20),    child: Row(      _//mainAxisAlignment: MainAxisAlignment.center,_ children: [        Container(          child: Text("Hero Mode",            style: TextStyle(                color: Colors._white_,              fontSize: 18,              fontWeight: FontWeight._bold_ ),),        ),        Switch(          value: model!=null && model!.isHeroModeEnable,          onChanged:(value){            print("value:$value");            model!.isHeroModeEnable=value;          },  activeTrackColor: Color(ColorConstants._light_blue_),         activeColor: Color(ColorConstants._pure_white_),        ),      ],    ),  );}

而后，我用电影题目 API 创立了一个列表视图，然而您能够依据须要为测试目标应用一个虚构图像列表。在此之后，我用 Hero 小部件包装图像，用 HeroMode 小部件包装 Hero 小部件。禁用 Hero 小部件的动画。基本上，这是一个媒介，以启用和禁用动画的英雄小部件。您不能间接从 Hero Widget 禁用动画。

Widget _buildPopularSection() {  return Container(    height: 300,    padding: EdgeInsets.only(left: 20, top: 5),    width: MediaQuery._of_(context).size.width,    child: model != null && model!.isPopularLoading ? Center(child: CircularProgressIndicator())        : Provider.value(            value: Provider._of_<HomeViewModel>(context),            child: Consumer(              builder: (context, value, child) => Container(                child: ListView.builder(                  shrinkWrap: true,                  itemCount: model != null &&   model!.popularMovies != null ? model!.popularMovies!.results!.length : 0,                  scrollDirection: Axis.horizontal,                  itemBuilder: (context, index) {                    return _buildPopularItem(                        index, model!.popularMovies!.results![index]);                  },                ),              ),            ),          ),  );}Widget _buildPopularItem(int index, Results result) {  return GestureDetector(    onTap: () {      Navigator._push_(        context,        MaterialPageRoute(            builder: (context) => MovieDetailView(movieDataModel: result)),      );    },    child: Column(      crossAxisAlignment: CrossAxisAlignment.start,      children: [        Container(          height: 200,          width: 150,          margin: EdgeInsets.only(right: 16),          child: HeroMode(            child: Hero(                tag: '${result.id}',              child: ClipRRect(                borderRadius: BorderRadius.circular(25.0),                child: Image.network(                  Constants._IMAGE_BASE_URL_ +                      Constants._IMAGE_SIZE_1_ +                      '${result.posterPath}',                  fit: BoxFit.cover,                ),              ),            ),            enabled: true,            _//enabled:model.isHeroModeEnabled,_ ),        ),        SizedBox(          height: 18,        ),        Container(          child: Text(            result.title!,            style: TextStyle(color: Colors._white_, fontSize: 15),          ),        ),        SizedBox(          height: 5,        ),        Container(          child: GFRating(            value: _rating,            color: Color(ColorConstants._orange_),            size: 16,            onChanged: (value) {              setState(() {                _rating = value;              });            },          ),        )      ],    ),  );}

当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

最初，我创立了第二个省道文件，在这个文件中，我制作了一个办法来显示图像动画。而后应用雷同标记的 Hero 小部件包装图像。当您有多个图像时，而后传递图像列表 id。

Widget _buildMovieBanner(Results movieItems) {  return Container(    height: 380,    child: Stack(      children: [        Positioned(          top: 20,          child: Container(            height: 350,            width: 240,            margin: EdgeInsets.only(left: 28, right: 30),            decoration: BoxDecoration(              borderRadius: BorderRadius.circular(22),              color: Color(ColorConstants._saphire_blue2_),            ),          ),        ),        Positioned(          top: 10,          child: Container(            height: 350,            width: 250,            margin: EdgeInsets.only(left: 22, right: 25),            decoration: BoxDecoration(              borderRadius: BorderRadius.circular(22),              color: Color(ColorConstants._cobaltBlue_),            ),          ),        ),        Container(          height: 350,          width: 260,          margin: EdgeInsets.only(left: 16, right: 16),          decoration: BoxDecoration(            borderRadius: BorderRadius.circular(20),          ),          child: ClipRRect(            borderRadius: BorderRadius.circular(24),            child: Hero(              tag: '${widget.movieDataModel.id}',              child: Image.network(                Constants._IMAGE_BASE_URL_ +                    Constants._IMAGE_SIZE_1_ +                    widget.movieDataModel.posterPath!,                fit: BoxFit.cover,              ),            ),          ),        ),      ],    ),  );}

结语:

In this article, I have explained the basic overview of the HeroMode Widget in a flutter, you can modify this code according to your choice. This was a small introduction to HeroMode Widget On User Interaction from my side, and it’s working using Flutter.

在本文中，我曾经简略介绍了 HeroMode 小部件的根本详情，您能够依据本人的抉择批改这段代码。这是一个小的介绍 HeroMode 小部件用户交互从我这边，它的工作应用 Flutter。

I hope this blog will provide you with sufficient information on Trying up the Explore, HeroMode Widget in your flutter projects.

我心愿这个博客将提供您尝试在您的 Flutter 我的项目的摸索，HeroMode 小部件短缺的信息。

❤ ❤ Thanks for reading this article ❤❤

❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

如果我做错了什么，请在评论中通知我，我很乐意改良。

Clap If this article helps you.

鼓掌如果这篇文章对你有帮忙的话。

GitHub 链接

https://github.com/flutter-de...

https://ducafecat.tech/
https://github.com/ducafecat
微信群 ducafecat
b 站 https://space.bilibili.com/40...

往期

开源

GetX Quick Start

https://github.com/ducafecat/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego...