flutter - Flutter：如何只用它的一个孩子覆盖整个 Column

Question

我有一列有多个子元素，它们是Flexible具有不同flex值的小部件。（我的实际实现对于嵌套的行/列更复杂，但找到这个简单案例的解决方案会有所帮助）

当我以编程方式更改值时，孩子们可以通过开箱即用的漂亮动画Flex很好地适应他们的父母。我可以轻松地将它们变高/变短。

但是，当我希望其中一个孩子自己覆盖所有内容Column并flex=0为其他孩子设置时，它不起作用。在文档中它说设置flex或0意味着null小Flexible部件不再“灵活”

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

从图中可以看出：我想将绿色区域的 flex 值从 3 设置为 0，并且只能看到覆盖整个屏幕的蓝色区域。

标签： flutterdartflutter-layout

Answer 1

截屏：

---

但是，您可以使用Flexible而不是Expanded第二个孩子，这也可以。

代码：

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