Flutter 构建完整应用手册-动画 顶

淡入淡出部件

作为UI开发人员,我们经常需要在屏幕上显示和隐藏元素。 但是,在屏幕上或屏幕外快速弹出元素会让最终用户感到不安。 相反,我们可以使用不透明动画淡入淡出元素,以创建流畅的体验。

在Flutter中,我们可以使用AnimatedOpacity部件来完成这项任务。

路线

  • 显示一个盒子以淡入淡出
  • 定义一个StatefulWidget
  • 显示切换可视性的按钮
  • 淡入淡出盒子

1.显示一个盒子以淡入淡出

首先,我们需要一些淡入淡出的东西! 在这个例子中,我们将在屏幕上绘制一个绿色框。

new Container(
  width: 200.0,
  height: 200.0,
  color: Colors.green,
);

2.定义一个StatefulWidget

现在我们有了一个用于设置动画的绿色框,我们需要一种方法来了解该框是否可见或不可见。 为了达到这个目的,我们可以使用一个StatefulWidget

StatefulWidget是创建State对象的类。 State对象拥有关于我们应用程序的一些数据,并提供了更新数据的方法。 当我们更新数据时,我们也可以使用Flutter用这些更改重建我们的UI。

在我们的例子中,我们将有一块数据:一个布尔值,表示按钮是可见还是不可见。

为了构造一个StatefulWidget,我们需要创建两个类:一个StatefulWidget和一个相应的State类。 专业提示:Android Studio和VSCode的Flutter插件包含快速生成此代码的稳定片段!

// The StatefulWidget's job is to take in some data and create a State class.
// In this case, our Widget takes in a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

// The State class is responsible for two things: holding some data we can 
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible or invisible
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    // The green box will go here with some other Widgets!
  }
}

3.显示切换可视性的按钮

现在我们有一些数据来确定我们的绿色框是否应该是可见或不可见的,我们需要一种方式来更新这些数据。 在我们的情况下,如果该框可见,我们想隐藏它。 如果该框隐藏,我们想要显示它!

为了达到这个目的,我们会显示一个按钮。 当用户按下按钮时,我们会将布尔值从true更改为false,或将false更改为true。 我们需要使用setState进行更改,这是State类中的一个方法。 这将让Flutter知道它需要重建部件。

注意:有关处理用户输入的更多信息,请参阅食谱手册的处理手势部分。

new FloatingActionButton(
  onPressed: () {
    // Make sure we call setState! This will tell Flutter to rebuild the
    // UI with our changes!
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: new Icon(Icons.flip),
);

4.淡入淡出盒子

我们在屏幕上有一个绿色的盒子。 我们有一个按钮来将可见性切换为true或false。 那么我们如何淡入淡出盒子? 随着AnimatedOpacity部件!

AnimatedOpacity部件需要三个参数:

  • opacity: 从0.0(不可见)到1.0(完全可见)的值。
  • duration: 动画完成需要多长时间
  • child: 动画作用的部件。 在我们的案例中,绿色框。
new AnimatedOpacity(
  // If the Widget should be visible, animate to 1.0 (fully visible). If
  // the Widget should be hidden, animate to 0.0 (invisible).
  opacity: _visible ? 1.0 : 0.0,
  duration: new Duration(milliseconds: 500),
  // The green box needs to be the child of the AnimatedOpacity
  child: new Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
);

完整例子

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Opacity Demo';
    return new MaterialApp(
      title: appTitle,
      home: new MyHomePage(title: appTitle),
    );
  }
}

// The StatefulWidget's job is to take in some data and create a State class.
// In this case, our Widget takes in a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

// The State class is responsible for two things: holding some data we can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible or invisible
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new AnimatedOpacity(
          // If the Widget should be visible, animate to 1.0 (fully visible). If
          // the Widget should be hidden, animate to 0.0 (invisible).
          opacity: _visible ? 1.0 : 0.0,
          duration: new Duration(milliseconds: 500),
          // The green box needs to be the child of the AnimatedOpacity
          child: new Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () {
          // Make sure we call setState! This will tell Flutter to rebuild the
          // UI with our changes!
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: new Icon(Icons.flip),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AndroidTv

关于RecyclerView你知道的不知道的都在这了(上)前言目录正文

1.2K60
来自专栏24K纯开源

ChartDirector应用笔记(一)

ChartDirector介绍 ChartDirector是一款小巧精细的商业图表库。其适用的语言范围非常广泛,包括.Net, Java, Asp, VB, ...

27570
来自专栏Google Dart

Flutte部件目录-基本部件(一)

一个容器首先用padding包围子组件(由decoration中出现的所有边框填满),然后将附加constraints应用于填充范围(将width和height...

43920
来自专栏葡萄城控件技术团队

前端代码标准最佳实践:CSS篇

上一篇《前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那...

230100
来自专栏数据的力量

10个提高你工作效率的Excel技巧

31740
来自专栏偏前端工程师的驿站

动手写个数字输入框1:input[type=number]的遗憾

前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历: 《动手写个数字输...

28950
来自专栏tkokof 的技术,小趣及杂念

HGE系列之三 渐入佳境

前两次“乱七八糟”的讲述了一些HGE的基础知识,不知看过的朋友有何感想,反正我自己都觉着有些不知所谓(!),但本着坚持到底的原则,今天继续献上拙文一篇,如果有朋...

9720
来自专栏Flutter&Dart

Flutter之WidgetsApp使用详解&与MaterialApp的纠缠

如果对MaterialApp不熟悉,可先看我上一篇文章: Flutter之MaterialApp使用详解

52230
来自专栏静晴轩

Vue 各类数据绑定

『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会;更是对待现实工作不懈渴求,乃至苛求。因为这已不是遁隐修行,而是职场卖命,唯有先快速...

41470
来自专栏性能与架构

将 Redis 作为图数据库

1. 简介 Redis 在 4.0 中正式支持了Module模块系统,使其可以进行丰富的扩展 图数据库的应用越来越广泛,RedisGraph 就是一个 Redi...

47560

扫码关注云+社区

领取腾讯云代金券