增长一个容器，同时保持其他容器的高度颤动答案

【问题标题】：Grow a container while maintaining heights of the other containers in flutter增长一个容器，同时保持其他容器的高度颤动
【发布时间】：2021-08-01 04:49:50
【问题描述】：

我有这三个容器。第一个需要成长以迎合其中的孩子。第二个可以有一个固定的高度，比如 flex 因子 1，而第三个也有一个固定的高度，比如 2 的 flex。整个屏幕都可以滚动。它实际上必须是可滚动的，因为第一个容器的孩子可能很多。注意：第一个容器的子级将有一个固定的高度，该容器将包含一个列表视图或列，其将具有固定高度的子级，例如每个 50.0.0 的容器。我如何实现这一点，尤其是第一个容器的“可增长性”，同时保持其他容器的高度。

我目前拥有的是

SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          child: ListView(
            children: [
              Flexible(
                  flex: 1,
                  child: Container(
                    color: Colors.blueAccent[200],
                    child: Column(children: [
                      Container(
                        height: 100.0,
                        color: Colors.greenAccent[200],
                      ),
                      Container(
                        height: 100.0,
                        color: Colors.purpleAccent[200],
                      ),
                      Container(
                        height: 100.0,
                        color: Colors.orangeAccent[200],
                      )
                    ]),
                  )),
              Expanded(
                flex: 1,
                child: Container(
                  
                  color: Colors.redAccent[100],
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  //height: 120.0,
                  color: Colors.redAccent[400],
                ),
              ),
            ],
          ),
        ),
      ),

这只会带来很多错误，无论我如何使用灵活和扩展小部件进行布局。同样，我不需要第一个容器在内部滚动，它应该根据其中的子项数量增长，而其余两个容器保持它们的高度。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您不能在可滚动小部件内使用Expanded 或Flexible，因为Expanded 的子级将获得无穷大的高度，而Flexible 的子级的高度将无法与其父级高度进行比较与。

可以根据屏幕高度设置底部两个容器的高度。

    SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          child: ListView(
            children: [
              Container(
                color: Colors.blueAccent[200],
                child: Column(
                  children: [
                    Container(
                      height: 100.0,
                      color: Colors.greenAccent[200],
                    ),
                    Container(
                      height: 100.0,
                      color: Colors.purpleAccent[200],
                    ),
                    Container(
                      height: 100.0,
                      color: Colors.orangeAccent[200],
                    )
                  ],
                ),
              ),
              Container(
                // 33 % of the screen height
                height: .33 * MediaQuery.of(context).size.height,
                color: Colors.redAccent[100],
              ),
              Container(
                // 33 % of the screen height
                height: .33 * MediaQuery.of(context).size.height,
                color: Colors.redAccent[400],
              ),
            ],
          ),
        ),
      ),

【讨论】：