动画化容器的属性

The Container 类提供了一种便捷的方式来创建一个具有特定属性的小部件：宽度、高度、背景颜色、填充、边框等等。

简单的动画通常涉及随着时间的推移改变这些属性。例如，您可能希望将背景颜色从灰色动画到绿色，以指示用户已选择某个项目。

为了对这些属性进行动画处理，Flutter 提供了 AnimatedContainer 小部件。与 Container 小部件类似，AnimatedContainer 允许您定义宽度、高度、背景颜色等等。但是，当 AnimatedContainer 使用新属性重建时，它会自动在旧值和新值之间进行动画转换。在 Flutter 中，这些类型的动画被称为“隐式动画”。

此食谱描述了如何使用 AnimatedContainer 在用户点击按钮时对大小、背景颜色和圆角进行动画处理，具体步骤如下：

1. 创建一个带有默认属性的 StatefulWidget。
2. 使用属性构建一个 AnimatedContainer。
3. 通过使用新属性重建来启动动画。

首先，创建一个 StatefulWidget 和 State 类。使用自定义 State 类来定义随时间变化的属性。在此示例中，包括宽度、高度、颜色和圆角。您还可以定义每个属性的默认值。

这些属性属于一个自定义的 State 类，以便在用户点击按钮时可以更新它们。

class AnimatedContainerApp extends StatefulWidget {
  const AnimatedContainerApp({super.key});

  @override
  State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  // Define the various properties with default values. Update these properties
  // when the user taps a FloatingActionButton.
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    // Fill this out in the next steps.
  }
}

接下来，使用上一步中定义的属性构建 AnimatedContainer。此外，提供一个 duration 来定义动画应该运行多长时间。

AnimatedContainer(
  // Use the properties stored in the State class.
  width: _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),
  // Define how long the animation should take.
  duration: const Duration(seconds: 1),
  // Provide an optional curve to make the animation feel smoother.
  curve: Curves.fastOutSlowIn,
)

最后，通过使用新属性重建 AnimatedContainer 来启动动画。如何触发重建？使用 setState() 方法。

向应用中添加一个按钮。当用户点击按钮时，在对 setState() 的调用中，使用新的宽度、高度、背景颜色和圆角更新属性。

一个真实的应用通常会在固定值之间进行转换（例如，从灰色背景到绿色背景）。对于此应用，每次用户点击按钮时都会生成新值。

FloatingActionButton(
  // When the user taps the button
  onPressed: () {
    // Use setState to rebuild the widget with new values.
    setState(() {
      // Create a random number generator.
      final random = Random();

      // Generate a random width and height.
      _width = random.nextInt(300).toDouble();
      _height = random.nextInt(300).toDouble();

      // Generate a random color.
      _color = Color.fromRGBO(
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
        1,
      );

      // Generate a random border radius.
      _borderRadius =
          BorderRadius.circular(random.nextInt(100).toDouble());
    });
  },
  child: const Icon(Icons.play_arrow),
)

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(const AnimatedContainerApp());

class AnimatedContainerApp extends StatefulWidget {
  const AnimatedContainerApp({super.key});

  @override
  State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  // Define the various properties with default values. Update these properties
  // when the user taps a FloatingActionButton.
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child: AnimatedContainer(
            // Use the properties stored in the State class.
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            // Define how long the animation should take.
            duration: const Duration(seconds: 1),
            // Provide an optional curve to make the animation feel smoother.
            curve: Curves.fastOutSlowIn,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          // When the user taps the button
          onPressed: () {
            // Use setState to rebuild the widget with new values.
            setState(() {
              // Create a random number generator.
              final random = Random();

              // Generate a random width and height.
              _width = random.nextInt(300).toDouble();
              _height = random.nextInt(300).toDouble();

              // Generate a random color.
              _color = Color.fromRGBO(
                random.nextInt(256),
                random.nextInt(256),
                random.nextInt(256),
                1,
              );

              // Generate a random border radius.
              _borderRadius =
                  BorderRadius.circular(random.nextInt(100).toDouble());
            });
          },
          child: const Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2024-06-26。 查看源代码 或 报告问题.