Flutter竖屏适配：两个ListView.builder可否用Expanded均分空间并支持滚动

当然可以！这完全可行，而且正是Expanded组件的核心用途之一——帮你在Column（或Row）里分配剩余可用空间，同时让内部的可滚动组件正常工作。

具体做法： #

把这两个ListView.builder分别包裹在Expanded组件中，并且给每个Expanded设置flex: 1（默认就是1，也可以显式写出来）。这样它们就会均分Column里除了固定高度组件之外的所有可用空间，而且各自内部的ListView因为有了明确的高度限制，就能正常滚动超出自身空间的内容了。

修改后的代码示例： #

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    _showQuestionTheme(),
    _showQuestion(),
    // 第一个需展开的ListView.builder，用Expanded包裹
    Expanded(
      flex: 1,
      child: _showAnswers(),
    ),
    // 第二个需展开的ListView.builder，同样用Expanded包裹
    Expanded(
      flex: 1,
      child: _yourSecondListView(), // 替换为你实际的第二个ListView.builder组件
    ),
    _buildAnswerButton(),
    _buildGameStatusTextfields(),
    _progressBarAnswerTimeLeft(),
  ],
)

额外说明： #

• 要是想调整两个ListView的空间占比（比如2:1），只需要修改flex的值即可，比如一个设flex:2，另一个flex:1。
• 尽量不要给ListView设置shrinkWrap: true，因为Expanded已经为它提供了固定高度，开启shrinkWrap会让ListView根据内容高度自适应，反而可能打乱布局。
• 因为你已经固定了竖屏模式，这个方案可以直接适配当前布局需求，不用额外考虑横屏情况。

内容的提问来源于stack exchange，提问作者Markus Bach