Flutter 颤振：如何仅用一个子元素覆盖整个柱

我有一个包含多个子元素的专栏，这些子元素是具有不同

flex

值的

Flexible

小部件。（对于嵌套的行/列，我的实际实现更为复杂，但找到这个简单情况的解决方案会有所帮助）

当我以编程方式更改

Flex

值时，孩子们会很好地适应他们的父母，并通过现成的动画。我可以轻松地把它们做得更高/更短

但是，如果我希望其中一个子项自己覆盖所有

列

并为其他子项设置

flex=0

，则它不起作用。在文档中，它表示将

flex

设置为

0

或

null

意味着

Flexible

小部件不再“灵活”

我该怎么做呢？任何想法都欢迎

---

如图所示：我想将绿色区域的弹性值从3设置为0，并且只能看到覆盖整个屏幕的蓝色区域。

屏幕截图：

@override
Widget build(BuildContext context) {
  int flex1 = 1, flex2 = 0;

  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: <Widget>[
        Expanded(
          flex: flex1,
          child: Container(
            color: Colors.blue,
            height: 100,
            alignment: Alignment.center,
            child: Text("Flex: $flex1", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
          ),
        ),
        Expanded( // you can use Flexible also 
          flex: flex2,
          child: flex2 == 0 ? SizedBox() : Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: Text("Flex: $flex2", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
          ),
        ),
      ],
    ),
  );
}

---

但是，您可以对第二个孩子使用

灵活的

，而不是

扩展的

，这也会起作用

代码：

@override
Widget build(BuildContext context) {
  int flex1 = 1, flex2 = 0;

  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: <Widget>[
        Expanded(
          flex: flex1,
          child: Container(
            color: Colors.blue,
            height: 100,
            alignment: Alignment.center,
            child: Text("Flex: $flex1", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
          ),
        ),
        Expanded( // you can use Flexible also 
          flex: flex2,
          child: flex2 == 0 ? SizedBox() : Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: Text("Flex: $flex2", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
          ),
        ),
      ],
    ),
  );
}

@覆盖
小部件构建（构建上下文）{
int flex1=1，flex2=0；
返回脚手架(
appBar:appBar（），
正文：专栏(
儿童：[
扩大(
flex:flex1，
子：容器(
颜色：颜色，蓝色，
身高：100，
对齐：对齐.center，
子项：文本（“Flex:$flex1”，样式：TextStyle（fontSize:32，fontWeight:fontWeight.bold）），
),
),
Expanded（//您也可以使用Flexible
flex:flex2，
子：flex2==0？SizedBox（）：容器(
颜色：颜色。绿色，
对齐：对齐.center，
子项：文本（“Flex:$flex2”，样式：TextStyle（fontSize:32，fontWeight:fontWeight.bold）），
),
),
],
),
);
}

您好，谢谢，我尝试了您的解决方案，但它的工作原理是隐藏第二个孩子，它会立即进行更改，而无需任何生长/收缩动画。我该如何处理这件事呢？我在什么地方读到过关于动画容器的文章。它会产生效果吗？这应该是一个不同的独立问题。我希望它只需要几分钟，但我不认为这里会是这种情况。这是一个好问题。没有扩展/灵活的，这很容易做到，而且不需要几分钟的时间。哈哈，不用担心，你的问题很好，我只是把它投了更高的票。如前所述，我今天时间不够，所以不能保证今天回答。但肯定是明天。这几乎是可行的，你只需要在

Transform

小部件中使用

Wrap

，将字符串按“”拆分，将其转换为

列表

，并将其分配给

儿童

，现在我正忙于某个项目，稍后可以回答它。