Flutter页面同时使用水平与垂直方向ListView.builder的实现咨询

你的代码问题出在两处：

1. 垂直ListView.builder的item中使用了Expanded组件，shrinkWrap为true的ListView本身是包裹内容高度的，不存在可分配的剩余空间，Expanded会导致布局约束异常
2. 垂直列表没有禁用自身滚动，和外层SingleChildScrollView的滚动事件会产生冲突

修正后的完整代码 #

SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      // 水平列表部分代码无需改动
      SizedBox(
        height: 200.0,
        child: ListView.builder(
          physics: ClampingScrollPhysics(),
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: 25,
          itemBuilder: (BuildContext context, int index) =>
              Card(
                child: Center(child: Text('Horizontal List Child')),
              ),
        ),
      ),
      // 垂直列表修正部分
      ListView.builder(
        itemCount: 10,
        shrinkWrap: true,
        // 禁用自身滚动，交给外层SingleChildScrollView处理
        physics: NeverScrollableScrollPhysics(),
        scrollDirection: Axis.vertical,
        itemBuilder: (context, index) {
          // 去掉Expanded组件，直接返回item内容
          return Card(
            child: Center(child: Text('Vertical List Child'))
          );
        },
      )
    ],
  ),
)

关键修改说明 #

• 移除垂直列表item外层的Expanded，每个item高度由自身内容决定，shrinkWrap: true会自动计算所有item的总高度作为ListView的高度，满足垂直列表高度和内部元素总高度一致的需求
• 新增physics: NeverScrollableScrollPhysics()属性，避免垂直列表自身响应滚动操作，保证整个页面的滚动逻辑统一由外层SingleChildScrollView控制
• 水平列表原有逻辑符合要求无需调整，保持即可

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