Flutter:如何使用 AnimatedContainer 在列中展开？

Question

假设我们有 Column 的 3 个 child :

Flexible(
   flex:1,
   child: Container(
      color: Colors.red,
   ),
),
Flexible(
   flex:3,
   child: Container(
      color: Colors.yellow,
   ),
),
Flexible(
   flex:1,
   child: Container(
      color: Colors.blue,
   ),
),

我想以编程方式扩展中间 child flex=3全覆盖 Column具有流畅的动画，而顶部和底部的 child 相应地缩小。

现在我的设置是 Column和 Flexible小部件。但是，如果您能想到其他小部件的解决方案，我也愿意接受这些想法。

Answer 1

截图:



代码:

Duration _duration = Duration(seconds: 1);
int _flex1 = 1, _flex2 = 3, _flex3 = 1;

@override
Widget build(BuildContext context) {

  double height = MediaQuery.of(context).size.height;
  var height1 = (_flex1 * height) / (_flex1 + _flex2 + _flex3);
  var height2 = (_flex2 * height) / (_flex1 + _flex2 + _flex3);
  var height3 = (_flex3 * height) / (_flex1 + _flex2 + _flex3);

  return Scaffold(
    body: Column(
      children: <Widget>[
        AnimatedContainer(
          duration: _duration,
          color: Colors.blue,
          height: height1,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex1}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.red,
          height: height2,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex2}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.teal,
          height: height3,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex3}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
      ],
    ),
  );
}