Flutter 中的动画：如何调整 Stack 的大小？

Question

为 Stack 小部件的大小设置动画的正确方法是什么？

第一个想法是用 SizeTransition 包裹 Stack:

Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        SizeTransition(
          sizeFactor: _height, // Just a Tween<double>(begin: 200, end: 400)
          axis: Axis.vertical,
          axisAlignment: -1,
          child: Stack(
            children: [
              Positioned(
                bottom: 10,
                left: 10,
                child: Container(width: 50, height: 50, color: Colors.blue),
              ),
              Positioned(
                top: 10,
                right: 10,
                child: Container(width: 50, height: 50, color: Colors.green),
              ),
            ],
          ),
        ),
      ],
    );
  }

但是运行该代码段导致以下错误：

'package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is not true.

所以，显然，这不是正确的方法。现在的问题是：如何为 Stack 的大小调整设置动画？

用 SizedBox 包装 Stack 会修复错误消息，但是，如何从 SizedTransition 中获取大小以设置 [=17 的正确大小=]?

Answer 1

您可以使用 AnimatedContainer 作为 Stack 小部件的父级，方法是提供 height 或 width 您喜欢随时间更改的小部件。

AnimatedContainer(
  color: Colors.purple,
  duration: const Duration(milliseconds: 200),
  height: height,
  child: Stack(
    children: [
      Positioned(
        bottom: 10,
        left: 10,
        child: Container(width: 50, height: 50, color: Colors.blue),
      ),
      Positioned(
        top: 10,
        right: 10,
        child: Container(width: 50, height: 50, color: Colors.green),
      ),
    ],
  ),
),

Flutter 中的动画：如何调整 Stack 的大小？

Animation in Flutter: How to resize a Stack?

flutter

flutter-layout

flutter-animation