Flutter列表无法完全延伸至底部的解决方法

问题根源在于你用SafeArea包裹了ListView——默认情况下SafeArea会自动避开屏幕底部的系统导航栏区域，导致列表无法延伸到屏幕最底部；而父容器的背景图不受这个限制，因此出现视觉上的不一致。

你可以通过以下两种方式解决：

方法一：修改SafeArea的bottom参数 #

将SafeArea的bottom属性设为false，取消底部区域的避让，让列表直接延伸到屏幕最底部：

SafeArea(
  bottom: false, // 添加该行配置
  child: ListView.builder(
    // 原有列表代码保持不变
  ),
)

方法二：拆分布局保留顶部安全区 #

如果需要保留顶部状态栏的避让，但让列表不受底部安全区限制，可以调整布局结构，只对顶部区域应用SafeArea：

body: Container(
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: NetworkImage('https://i.pinimg.com/564x/3e/a9/ba/3ea9ba9e84ab6808a394b6aa165c1673.jpg'),
        fit: BoxFit.fill),
  ),
  child: Column(
    children: [
      // 仅顶部保留安全区，避开状态栏
      SafeArea(child: SizedBox.shrink()),
      // 列表部分不受底部安全区限制，填充剩余空间
      Expanded(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                padding: EdgeInsets.all(8.0),
                color: Colors.white,
                child: Text(
                  items[index],
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
            );
          },
        ),
      ),
    ],
  ),
)

补充适配提示 #

如果你的应用需要适配带底部导航栏的设备，方法一可能会导致列表项被导航栏遮挡，此时可以通过MediaQuery获取底部导航栏高度，给列表添加对应内边距：

final bottomPadding = MediaQuery.of(context).padding.bottom;

ListView.builder(
  padding: EdgeInsets.only(bottom: bottomPadding),
  // 原有列表代码保持不变
)

内容的提问来源于stack exchange，提问作者Draško