Flutter Widget 之AnimatedPadding

Padding widget是在widget和屏幕边框之间提供缓冲区和空格的好方法。

但是，如果您向动态更改widget的padding，并让它在两个padding之间设置动画，改怎么办呢？

好吧，AnimatedPadding widget非常适合您。

首先，使用AnimatedPadding包装要填充dget。

给padding插入一个double类型的变量，并且当它的值改变时，您将使用它来触发它。

接下来，提供动画的持续时间，该持续时间决定了padding动画的更改速度。

最后，您可以指定动画的曲线，以实现不同的动画效果。

double padValue = 0;

AnimatedPadding(
    padding: EdgeInsets.all(padValue),
    duration: const Duration(second: 1),
    curve: Curves.easeInOut,
    child: Container(
        color: Colors.blue,
    ),
)

现在，只要padding变量发生变化，padding就会生成动画。

尝试使用StatefulWidget来控制padding 的值。

class PaddingState extedns State<...> {
    double padValue = 0l

    _updatePadding(double value) => 
        setState(() => padValue = value;);

    @override
    Widget build(BuildContext context) {
        return AnimatedPadding(
            padding: EdgeInsets.all(padValue),
            ...
        );
    }
}

如果想了解有关AnimatedPadding的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址