Flutter Widget 之AnimatedPositioned

在Flutter的widget中很多有Slider的功能，从Slider本身一直到Dismissible和Draggable，如果您想要实现这种功能，有一个很好的widget AnimatedPositioned。

它可以嵌入堆栈的子项列表就像常规位置widget一样，

如Positioned一样，将它的子项放在您想要的位置

bool showMessage = false;

Stack(
    children: [
        Positioned(
            bottom: 10,
            right: 10,
            child: MessageWidget(widget.message),
        ),
        AnimatedPositioned(
          duration: Duration(milliseconds: 500),
          bottom: showMessage ? 70 : 10,
          right: 10,
          child: BlockerWidget(),  
        ),
    ]
)

不同指出在于，如果使用不同的方向或宽度/高度 rebuild AnimatedPositioned，它将会自动更改。

setState(() => showMessage = true);

这对于显示效果和其他滑动技巧非常有用

另外，由于动画中使用了所有方向属性，你的widget可以作为其一部分变大和缩小

Stack(
    children: [
        Positioned(
            bottom: 10,
            right: 10,
            child: MessageWidget(widget,message),
        ),
        AnimatedPositioned(
            duration: DUration(millisends: 500),
            bottom: showMessage ? 70 : 10,
            right: 10,
            top: showMessage ? 50 : 150,
            child: BlockerWidget(),
        ),
    ]
)

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

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