Flutter：实现ListTile与统计文本固定、仅ListView可滚动

核心原因 #

当前布局中，ListView设置shrinkWrap: true会强制展开所有列表项，而外层Column未对其高度做约束，导致内容超出屏幕范围触发底部溢出错误。要实现顶部ListTile和"Total items"文本固定、仅列表滚动的效果，需让列表占据屏幕剩余空间。

修改方案 #

调整BlocConsumer内部布局结构，给ListView所在区域添加Expanded组件约束高度，同时移除ListView的shrinkWrap: true属性：

Widget _showBody(BuildContext context) {
  return Column(children: [
    // 固定不滚动的ListTile
    ListTile(
      horizontalTitleGap: 0,
      tileColor: Colors.white,
      onTap: () {},
      leading: const Icon(Icons.smart_button),
      trailing: const Icon(Icons.arrow_right),
      title: const Text('Click Inside'),
    ),
    BlocConsumer<SmartMeterListScreenCubit, SmartMeterListScreenState>(
      builder: ((context, state) {
        if (state is SmartMeterListScreenDone) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 固定不滚动的统计文本
              Container(
                width: MediaQuery.of(context).size.width,
                color: Colors.grey.shade200,
                child: Padding(
                  padding: const EdgeInsets.all(10),
                  child: Text(
                    "Total items : ${state.smartMeter?.length}",
                    style: TextStyle(color: Colors.deepPurple.shade900),
                  ),
                ),
              ),
              // 用Expanded包裹，让列表占据剩余屏幕空间
              Expanded(
                child: RefreshIndicator(
                  onRefresh: () async {
                    // 刷新逻辑
                  },
                  child: ListView.separated(
                    physics: const AlwaysScrollableScrollPhysics(),
                    separatorBuilder: (context, index) => Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Container(
                        color: Colors.grey.shade200,
                        height: 1,
                      ),
                    ),
                    padding: EdgeInsets.zero,
                    // 移除shrinkWrap: true，Expanded已约束高度
                    itemCount: 100,
                    itemBuilder: (context, index) {
                      return InkWell(
                        onTap: () {},
                        child: ListItemPadding(
                          child: Text(index.toString()),
                        ),
                      );
                    },
                  ),
                ),
              ),
            ],
          );
        }
        return Container();
      }),
      listener: ((context, state) {}),
    )
  ]);
}

关键修改点 #

• 添加Expanded组件包裹RefreshIndicator和ListView，让列表区域自动填充屏幕剩余空间，避免内容溢出。
• 移除ListView的shrinkWrap: true属性，因为Expanded已为其提供明确高度约束，无需让列表自适应内容高度。

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