Flutter：ListView.builder嵌套Expanded后Container底部出现空白问题

在Column组件中使用Expanded作为ListView.builder的父组件时，公告板Widget底部出现空白区域（示意图：公告板底部存在未填充的空白）。尝试多种方法后仍无法消除，以下是相关代码：

Expanded(
  child: StreamBuilder<List<NoticeBoardModel>>(
      stream: FireBaseNoticeBoardService().getAllNotice(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        } else {
          if (snapshot.data?.isNotEmpty == true) {
            return ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemCount: snapshot.data?.length,
              itemBuilder: (context,index) {
                return Padding(
                  padding: const EdgeInsets.only(left: 8.0,right: 8.0),
                  child: Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                      height: 150,
                      width: 150,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Color(int.parse(snapshot.data![index].noticeColor ?? AppColors.noticeModelColorPink.value.toString(),radix: 16))
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.only(top: 8,left: 8, right: 8),
                              child: Text(snapshot.data![index].noticeTitle ?? "No title found for this notice",
                                style: Theme.of(context).textTheme.headline3?.copyWith(fontWeight: FontWeight.bold),
                              ),
                            ),
                          ),
                          Expanded(child: Container()),
                          Padding(
                            padding: const EdgeInsets.only(bottom: 8,left: 8, right: 8),
                            child: Text(snapshot.data![index].createdDate !=null ? dateFormatString(snapshot.data![index].createdDate!) : "No Date Found",
                              style: Theme.of(context).textTheme.headline3?.copyWith(color: AppColors.appBlackColor.withOpacity(0.5),fontWeight: FontWeight.bold),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },);
          } else {
            return const Center(
              child: Text('No Data Exist'),
            );
          }
        }
      }),
),

核心原因 #

1. Expanded会强制子组件（ListView）占满Column的垂直剩余空间，而你的ListView是水平滚动模式，其高度被拉伸至大于item的固定高度（150）。
2. item内部的Align(alignment: Alignment.topCenter)让高度150的Container在拉伸后的ListView中顶部对齐，下方自然形成空白。

具体解决方案 #

方案一：固定ListView高度（最直接）

将包裹StreamBuilder的Expanded替换为SizedBox，直接指定高度为item的150，让ListView高度与item一致，彻底消除空白：

SizedBox(
  height: 150,
  child: StreamBuilder<List<NoticeBoardModel>>(
    stream: FireBaseNoticeBoardService().getAllNotice(),
    builder: (context, snapshot) {
      // 原有逻辑代码保持不变
    },
  ),
)

方案二：调整item的对齐方式

如果需要ListView占满垂直空间，移除item中的Align组件，或者将其对齐方式改为Alignment.center，让Container在ListView高度范围内居中：

// 移除Align，直接保留Container
return Padding(
  padding: const EdgeInsets.only(left: 8.0,right: 8.0),
  child: Container(
    height: 150,
    width: 150,
    // 原有Container内部代码不变
  ),
);

方案三：清理item内部冗余组件

item的Column中存在一个空的Expanded(child: Container())，它会撑开标题和日期之间的空间，如果不需要这个间距，直接移除即可避免item内部的不必要空白：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(top: 8,left: 8, right: 8),
        child: Text(snapshot.data![index].noticeTitle ?? "No title found for this notice",
          style: Theme.of(context).textTheme.headline3?.copyWith(fontWeight: FontWeight.bold),
        ),
      ),
    ),
    // 移除该行空Expanded代码
    Padding(
      padding: const EdgeInsets.only(bottom: 8,left: 8, right: 8),
      child: Text(snapshot.data![index].createdDate !=null ? dateFormatString(snapshot.data![index].createdDate!) : "No Date Found",
        style: Theme.of(context).textTheme.headline3?.copyWith(color: AppColors.appBlackColor.withOpacity(0.5),fontWeight: FontWeight.bold),
        overflow: TextOverflow.ellipsis,
      ),
    ),
  ],
)

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