颤振容器边距 - Dart

在 Flutter 中，您可以使用 AnimatedContainer 构建可动画化的容器。这种容器的样式可以随时间而改变，而不需要编写大量的动画代码。

AnimatedContainer 提供了 Duration 和 Curve 参数，使您可以掌控动画的时间和缓动效果。此外，它还具有 EdgeInsets 属性，可让您控制容器边距的变化。

以下是一个示例，显示了如何在 Flutter 中使用 AnimatedContainer 和 EdgeInsets 来创建动画容器：

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isExpanded = !_isExpanded;
        });
      },
      child: AnimatedContainer(
        duration: Duration(seconds: 1),
        curve: Curves.easeInOut,
        margin: _isExpanded ? EdgeInsets.all(16) : EdgeInsets.all(8),
        child: Container(
          color: Colors.blue,
          width: 200,
          height: 100,
        ),
      ),
    );
  }
}

在此示例中，我们创建了一个 AnimatedContainer，初始时它会显示蓝色的矩形，宽度为200，高度为100。当用户点击矩形时，它会扩展或缩小，并且边距会动画化地改变。

我们使用 GestureDetector 来捕获点击事件，并使用 setState 来在转换状态时触发 Flutter 的重绘过程。AnimatedContainer 的 duration 属性指定动画的持续时间，curve 属性指定动画的缓动效果。最后，我们使用 margin 属性来控制边距的变化。

此外，您还可以使用 AnimatedPadding 来实现在容器边距动画过程中的渐变效果。在这种情况下，您可以省略 duration 和 curve 属性，并只使用 padding 属性。以下是示例代码：

class AnimatedPaddingExample extends StatefulWidget {
  @override
  _AnimatedPaddingExampleState createState() => _AnimatedPaddingExampleState();
}

class _AnimatedPaddingExampleState extends State<AnimatedPaddingExample> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isExpanded = !_isExpanded;
        });
      },
      child: AnimatedPadding(
        padding: _isExpanded ? EdgeInsets.all(16) : EdgeInsets.all(8),
        child: Container(
          color: Colors.blue,
          width: 200,
          height: 100,
        ),
        duration: Duration(seconds: 1),
      ),
    );
  }
}

在此示例中，我们使用 AnimatedPadding 来控制边距的变化。padding 属性指定容器的边距，当用户点击容器时，其大小会动画化地改变。duration 属性指定了动画的持续时间。

总的来说，在 Flutter 中创建可动画化的容器非常简单。您可以使用 AnimatedContainer 或 AnimatedPadding 来创建容器，并在时间内控制它们的样式。