Flutter – AnimatedContainer 小部件

在Flutter，容器是一个简单的小部件，具有明确定义的属性，如高度、宽度和颜色等。 AnimatedContainer小部件是一个带有动画的简单容器小部件。这些类型的小部件可以通过改变它们与容器小部件相同的属性值来动画化。 Flutter的这些类型的动画被称为“隐式动画”。我们将在本文中通过使用 AnimatedContainer 小部件构建一个简单的应用程序来详细讨论。

AnimatedContainer 类的构造函数：

AnimatedContainer(
{Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
Decoration decoration,
Decoration foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
EdgeInsetsGeometry margin,
Matrix4 transform,
Widget child,
Curve curve: Curves.linear,
@required Duration duration,
VoidCallback onEnd}
)

AnimatedComtainer 小部件的属性：

• 对齐：此属性将AlignmentGeometry类作为对象。它控制子小部件与容器的对齐方式。
• child：此属性将一个小部件作为要显示在AnimatedContainer 中的对象。
• 约束： BoxConstraints类是这个属性的对象。它对AnimatedContainer 中的子小部件应用了一些额外的约束。
• 装饰：此属性将装饰类作为对象应用到子部件后面的颜色。
• foregroundDecoration：此属性控制AnimatedContainer内文本的默认颜色。
• mrgin： margin属性将EdgeInsetsGeometry类作为对象。它在小部件周围添加了空白空间。
• padding：该属性还以EdgeInsetsGeometry类为对象，在AnimatedConatainer和子部件内添加空白空间。
• 转换： 该属性将Matrix4作为对象，在绘制AnimatedContainer之前应用矩阵变换。

按照以下步骤使用 AnimatedContainer 小部件构建应用程序：

• 创建一个 StatefulWidget 并定义其属性。
• 添加一个 AnimatedContainer 小部件并定义其属性。
• 通过改变这些属性来创建动画。

让我们详细讨论它们。

创建一个 StatefulWidget：

使用自定义 State 类创建一个 StatefulWidget 并定义其属性，如下所示：

Dart

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
 
class _AnimatedContainerAppState extends State {
  double _width = 55;
  double _height = 55;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(9);
 
  @override
  Widget build(BuildContext context) {
  }
}

添加 AnimatedContainer 小部件：

添加一个AnimatedContainer小部件，定义其持续时间属性，以确定容器将要动画多长时间，如下所示：

Dart

AnimatedContainer(
 
  width: _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),
 
  duration: Duration(seconds: 1),
  curve: Curves.fastOutSlowIn,
);

改变属性：

指定属性的持续时间结束后重建和更改属性如下所示：

Dart

FloatingActionButton(
  child: Icon(Icons.play_arrow),
  onPressed: () {
 
    setState(() {
      final random = Random();
 
      // random dimension generator
      _width = random.nextInt(300).toDouble();
      _height = random.nextInt(300).toDouble();
 
      // random color generator
      _color = Color.fromRGBO(
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
        1,
      );
      _borderRadius =
          BorderRadius.circular(random.nextInt(100).toDouble());
    });
  },
);

完整的源代码：

Dart

import 'dart:math';
 
import 'package:flutter/material.dart';
 
void main() => runApp(AnimatedContainerApp());
 
class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
 
class _AnimatedContainerAppState extends State {
 
  double _width = 70;
  double _height = 70;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(10);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: AnimatedContainer(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.play_arrow),
          backgroundColor: Colors.green,
          onPressed: () {
            setState(() {
              // random generator
              final random = Random();
 
              // random dimension generator
              _width = random.nextInt(500).toDouble();
              _height = random.nextInt(500).toDouble();
 
              // random color generator
              _color = Color.fromRGBO(
                random.nextInt(300),
                random.nextInt(300),
                random.nextInt(300),
                1,
              );
 
              // random radius generator
              _borderRadius =
                  BorderRadius.circular(random.nextInt(100).toDouble());
            });
          },
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！