Flutter Hero 实现组件跨界面跳动效果

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_31433709/article/details/88854747

 

感谢:https://juejin.im/post/5c4dae0de51d456e41391586

脑图先行:

今天算是完成了第一个flutter练手项目,真的佩服这个UI设计,简直了!给出链接,好文共欣赏嘛!

https://github.com/sergiandreplace/flutter_planets_tutorial

然后是脑图中所对应的三个demo具体信息:

添加占位符Demo:

Hero(
    tag: "DemoTag",
    child: Icon(
      Icons.add,
      size: 150.0,
    ),
    placeholderBuilder: (context, widget) {
      return Container(
        height: 150.0,
        width: 150.0,
        child: CircularProgressIndicator(),
      );
    },
  ),

更改hero控件:

Hero(
  tag: "DemoTag",
  child: Icon(
    Icons.add,
    size: 150.0,
  ),
  flightShuttleBuilder: (flightContext, animation, direction,
      fromContext, toContext) {
    return Icon(FontAwesomeIcons.rocket, size: 150.0,);
  },
),

if(direction == HeroFlightDirection.push) {
  return Icon(
    FontAwesomeIcons.rocket,
    size: 150.0,
  );
} else if (direction == HeroFlightDirection.pop){
  return Icon(
    FontAwesomeIcons.rocket,
    size: 70.0,
  );
}

使用Hero动画支持ios返回滑动手势是否触发hero动画效果

Hero(
  tag: "DemoTag",
  child: Icon(
    Icons.add,
  ),
  transitionOnUserGestures: true,
),

好了,今天是学习Flutter的第四天了.

总有一天你将会老去,而我,将会加冕为王!!!!!

展开阅读全文

没有更多推荐了,返回首页