Flutter 颤振：如何使用带展开列的动画容器？

假设我们有一个

列的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

以编程方式扩展中间子级，以平滑动画覆盖整个

列

，同时顶部和底部子级相应收缩

---

现在，我的设置带有

列

和

灵活的

小部件。然而，如果你能想到一个解决方案与其他小部件，我也开放这些想法

屏幕截图：

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)),
        ),
      ],
    ),
  );
}

---

代码：

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)),
        ),
      ],
    ),
  );
}

Duration\u Duration=持续时间（秒：1）；
int _flex1=1，_flex2=3，_flex3=1；
@凌驾
小部件构建（构建上下文）{
double height=MediaQuery.of（context）.size.height；
变量高度1=（_flex1*高度）/（_flex1+_flex2+_flex3）；
变量高度2=（_flex2*高度）/（_flex1+_flex2+_flex3）；
变量高度3=（_flex3*高度）/（_flex1+_flex2+_flex3）；
返回脚手架(
正文：专栏(
儿童：[
动画容器(
持续时间：_持续时间，
颜色：颜色，蓝色，
高度：高度1，
对齐：对齐.center，
子项：文本（“Flex:${u flex1}”，样式：TextStyle（fontSize:32，fontWeight:fontWeight.bold）），
),
动画容器(
持续时间：_持续时间，
颜色：颜色，红色，
高度：高度2，
对齐：对齐.center，
子项：文本（“Flex:${u flex2}”，样式：TextStyle（fontSize:32，fontWeight:fontWeight.bold）），
),
动画容器(
持续时间：_持续时间，
颜色：Colors.teal，
高度：高度3，
对齐：对齐.center，
子项：文本（“Flex:${u flex3}”，样式：TextStyle（fontSize:32，fontWeight:fontWeight.bold）），
),
],
),
);
}

适用于全屏显示（无

AppBar

），因此，如果要使用标准

AppBar

，请使用此解决方案

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

@override
Widget build(BuildContext context) {

  var data = MediaQuery.of(context);

  // subtracted status bar and AppBar height from total height
  double height = data.size.height - data.padding.top - kToolbarHeight;
  var height1 = (_flex1 * height) / (_flex1 + _flex2 + _flex3);
  var height2 = (_flex2 * height) / (_flex1 + _flex2 + _flex3);
  var height3 = (_flex3 * height) / (_flex1 + _flex2 + _flex3);

  return Scaffold(
    appBar: AppBar(title: Text("Flex"),),
    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)),
        ),
      ],
    ),
  );
}

Duration\u Duration=持续时间（秒：1）；
int _flex1=1，_flex2=1，_flex3=1；
@凌驾
小部件构建（构建上下文）{
var data=MediaQuery.of（上下文）；
//从总高度减去状态栏和AppBar高度
双重高度=data.size.height-data.padding.top-kToolbarHeight；
变量高度1=（_flex1*高度）/（_flex1+_flex2+_flex3）；
变量高度2=（_flex2*高度）/（_flex1+_flex2+_flex3）；
变量高度3=（_flex3*高度）/（_flex1+_flex2+_flex3）；
返回脚手架(
appBar:appBar（标题：文本（“Flex”），），
正文：专栏(
儿童：[
动画容器(
持续时间：_持续时间，
颜色：颜色，蓝色，
高度：高度1，
对齐：对齐.center，
子项：文本（“Flex:${u flex1}”，样式：TextStyle（fontSize:32，fontWeight:fontWeight.bold）），
),
动画容器(
持续时间：_持续时间，
颜色：颜色，红色，
高度：高度2，
对齐：对齐.center，
子项：文本（“Flex:${u flex2}”，样式：TextStyle（fontSize:32，fontWeight:fontWeight.bold）），
),
动画容器(
持续时间：_持续时间，
颜色：Colors.teal，
高度：高度3，
对齐：对齐.center，
子项：文本（“Flex:${u flex3}”，样式：TextStyle（fontSize:32，fontWeight:fontWeight.bold）），
),
],
),
);
}

如何在middle flex上获得

全屏

？非常优雅的解决方案。你不能等到明天，对吗？：）谢谢，晚安。我很快会问你另一个问题：D，接受care@DolDurma通过设置

flex1=0

、

flex2=1

和

flex3=0

@aytunch Haha，您可以获得全屏效果，如果您特别提到要使用

扩展的
或
灵活的
解决问题，我想等一下，但正如您所说，您愿意接受其他想法，解决问题只需不到5分钟。很高兴听到它按照你想要的方式工作。如果您有任何问题，请告诉我，随时乐意帮助！