Flutter：如何将AnimatedContainer与Expanded in Column一起使用？

Question

假设我们有一个Column的3个孩子：

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

我想用flex=3以编程方式扩展中间子对象，以使其具有流畅的动画覆盖整个Column，而顶部和底部子对象相应地缩小。

现在，我的设置是使用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)),
        ),
      ],
    ),
  );
}

Answer 2

This solution适合全屏显示（没有pad_sequences），因此如果要使用标准的AppBar，请改用此解决方案。

AppBar