Flutter中ListView无法展示API数据问题求助（GridView正常）

AI 小北

2026-7-26

解决方案：修复横向ListView无法显示的问题

问题根源

你的EbookHorizontalList组件中，ListView.builder被错误地包裹在Expanded组件内。Expanded仅适用于Flex布局（Row/Column），而它的直接父组件是Padding，外层又是固定高度的SizedBox，这种结构会导致ListView无法获取正确的布局约束，最终无法渲染内容。

修复步骤

移除ListView.builder外层的Expanded组件
确保ListView在固定高度的SizedBox内可以正确获取尺寸约束

修改后的`EbookHorizontalList`代码

import 'package:ebook_ui/ebook_item.dart';
import 'package:ebook_ui/ebook_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class EbookHorizontalList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ebooks = Provider.of<Ebooks>(context, listen: false);
    return SizedBox(
      height: 200,
      child: Padding(
        padding: const EdgeInsets.only(top: 15.0),
        // 移除多余的Expanded组件
        child: ListView.builder(
          addAutomaticKeepAlives: true,
          itemCount: ebooks.imageslist.length,
          scrollDirection: Axis.horizontal,
          physics: const ClampingScrollPhysics(),
          padding: const EdgeInsets.only(left: 15.0),
          itemBuilder: (BuildContext context, int index) {
            return EbookItem(index);
          },
        ),
      ),
    );
  }
}