浅尝flutter中的动画(淡入淡出)

在移动端开发中,经常会有一些动画交互,比如淡入淡出,效果如图:


淡入淡出.gif

因为官方封装好了AnimatedOpacity Widget,开箱即用,所以我们用起来很方便,代码量很少,做少量配置即可,所以,全部代码如下:

import 'package:flutter/material.dart';

class TabPage3 extends StatefulWidget {
  @override
  createState() => new LogoFadeState();
}
class LogoFadeState extends State<TabPage3> {
  // 初始opacityLevel为1.0为可见状态,为0.0时不可见
  double opacityLevel = 1.0;
  _changeOpacity() {
    //调用setState()  根据opacityLevel当前的值重绘ui
    // 当用户点击按钮时opacityLevel的值会(1.0=>0.0=>1.0=>0.0 ...)切换
    // 所以AnimatedOpacity 会根据opacity传入的值(opacityLevel)进行重绘 Widget
    setState(
        () => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0
      );
  }
  @override
  Widget build(BuildContext context) {
    return new Column(//一个Column布局,主轴为垂直方向,起点在上沿。
      mainAxisAlignment: MainAxisAlignment.spaceAround,//子组件在主轴上均匀分布在容器内,两边留有一半的间隔空间。
      children: [
        new AnimatedOpacity(// 使用一个AnimatedOpacity Widget
          opacity: opacityLevel,
          duration: new Duration(seconds: 1),//过渡时间:1
          child:new Container(
            padding:const EdgeInsets.only(right:20.0,bottom:15.0,left:20.0),//内边距
            child:new Text("和React Native一样,Flutter也提供响应式的视图,Flutter采用不同的方法避免由JavaScript桥接器引起的性能问题,即用名为Dart的程序语言来编译。Dart是用预编译的方式编译多个平台的原生代码,这允许Flutter直接与平台通信,而不需要通过执行上下文切换的JavaScript桥接器。编译为原生代码也可以加快应用程序的启动时间。实际上,Flutter是唯一提供响应式视图而不需要JavaScript桥接器的移动SDK,这就足以让Fluttter变得有趣而值得一试,但Flutter还有一些革命性的东西,即它是如何实现UI组件的?") ,)
        ),
        new RaisedButton(
          child:new Container(
              child: new Text("点我试试"),
            ) ,
          onPressed: _changeOpacity,//添加点击事件
        ),
      ],
    );
  }
}

flutter官方给我们封装了很多很多常用的开箱即用的控件,为开发带来了极大的便利。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 135,769评论 17 578
  • 爱灶哥阅读 51评论 0 1
  • 春天来了,春天来得悄无声息,来得静悄悄,让人毫无防备。也许个别粗心的,处于这乍暖还寒的天气,还以为是冬天呢。 其实...
    七月风阅读 32评论 2 3
  • (1) 朋友A每月阅读10+的书籍,每周1部电影,每月约见N个趣人。除此之外,还知行合一,理论联系实际,把所学所思...
    艾米要奋进阅读 179评论 1 8
  • 写花写酒写美景,写山写水写春风。 新词旧赋三百首,不过恣意诉心情。
    紫气又东来阅读 25评论 0 0