如何在单个屏幕中设置两个同区域的响应式ListView？

你的代码直接在Column中放置两个ListView会触发布局溢出，因为ListView默认会试图占用无限垂直空间，而Column的垂直空间受限于屏幕大小。要让两个ListView平分屏幕可用区域，只需用Expanded组件包裹每个ListView即可，Expanded会让子组件占据Column中剩余的可用空间，两个Expanded默认会平分空间，适配不同屏幕尺寸。

修改后的代码如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text("Demo Project")),
    body: Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(children: getDemolist()),
          ),
          Expanded(
            child: ListView(children: getDemolisttwo()),
          ),
        ],
      ),
    ),
  );
}

关键说明 #

• Expanded会强制子组件填充Column分配的剩余垂直空间，两个Expanded的flex默认值都是1，因此会平分AppBar下方的所有可用空间。
• 如果需要调整两个ListView的占比，可以给Expanded设置不同的flex值（比如一个设为2，一个设为1，就是2:1的比例）。
• 保留了原代码的Padding，确保内容和屏幕边缘有间距，符合响应式布局的需求。

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