Flutter ListView滚动时上方控件下方仍空白问题求助

问题根源 #

你的代码里导致ListView与上方文本之间出现空白的核心原因有两个：

1. ListView.builder默认带有顶部内边距，会自动和上方元素产生空隙
2. shrinkWrap: true与Expanded同时使用，干扰了ListView的布局空间计算

修复步骤 #

1. 移除shrinkWrap: true：Expanded已经会让ListView占据Column的剩余空间，shrinkWrap在此场景下完全多余，反而会导致布局异常。
2. 清除ListView默认内边距：给ListView.builder添加padding: EdgeInsets.zero，直接消除默认的顶部空隙。
3. 优化整体内边距（可选）：将body的单边左内边距改为对称左右内边距，让布局更协调。

修复后的完整代码 #

import 'package:ecommerce/Models/shop_functions.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Cart extends StatefulWidget {
  const Cart({super.key});

  @override
  State<Cart> createState() => _CartState();
}

class _CartState extends State<Cart> {
  @override
  Widget build(BuildContext context) {
    final palette = Theme.of(context).colorScheme;
    return Consumer<ShopFunctions>(
      builder: (context, value, child) {
        double priceTotal = 0;
        for (var val in value.cart) {
          priceTotal += val.price;
        }
        return Scaffold(
          floatingActionButton: Container(
            width: 200,
            child: FloatingActionButton(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
              backgroundColor: Colors.blue,
              onPressed: () {},
              child: Text(
                'Pay Rs ${priceTotal}',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
          backgroundColor: palette.background,
          appBar: AppBar(
            elevation: 0,
            backgroundColor: palette.background,
          ),
          body: Padding(
            // 改为对称左右内边距，布局更美观
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Cart',
                  style: TextStyle(
                    fontSize: 35,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  'Check your cart before paying',
                  style: TextStyle(
                    color: palette.inversePrimary,
                  ),
                ),
                // 可选：添加可控的小间距，避免文本与ListView过于拥挤
                SizedBox(height: 12),
                Expanded(
                  child: ListView.builder(
                    itemCount: value.cart.length,
                    // 移除多余的shrinkWrap参数
                    // shrinkWrap: true,
                    // 清除默认内边距
                    padding: EdgeInsets.zero,
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: ListTile(
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                          tileColor: palette.primary,
                          leading: ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: Image.asset(value.cart[index].imagePath),
                          ),
                          title: Text(
                            value.cart[index].name,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          subtitle: Text(value.cart[index].price.toString()),
                          trailing: IconButton(
                            icon: Icon(Icons.delete),
                            onPressed: () {
                              value.removeFromCart(value.cart[index]);
                            },
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

效果说明 #

修复后：

• ListView会紧贴上方文本（或你设置的可控间距），底部自动停在支付按钮上方
• 滚动行为完全符合需求：向上滚动时ListView在文本下方消失，向下滚动时在支付按钮上方消失

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