Floating action button居中docked时GridView末项文字被遮挡如何修复

当Floating action button设置为center docked状态时，GridView最后一个索引项的文字被遮挡无法查看，现象如下：

问题核心原因：设置为centerDocked模式的悬浮按钮会悬浮在页面内容上方，GridView默认计算的滚动视口不会自动预留这部分悬浮组件的占用空间，滑动到最底部时最后一项会被悬浮按钮、底部导航栏遮挡。
可直接使用的修复方式如下：

• 方案1：给GridView添加底部内边距（实现最简单）
  给GridView的padding属性配置足够的底部间距，将列表内容整体上推避开遮挡区域。常规Material设计规范下，centerDocked模式的FAB搭配BottomAppBar时，预留80逻辑像素的底部间距即可满足需求，可根据项目实际组件尺寸调整数值：

  // 无论使用GridView默认构造、count构造还是builder构造，添加padding属性即可
  GridView.builder(
    // 原有配置项：itemCount、gridDelegate等
    padding: const EdgeInsets.only(bottom: 80),
    itemBuilder: (context, index) {
      // 原有item渲染逻辑
    },
  )
  

• 方案2：动态适配异形屏安全区
  若需要适配不同设备的系统底部安全区，避免硬编码数值在异形屏上出现适配异常，可通过MediaQuery获取设备系统安全区高度，动态计算需要预留的总高度：

  @override
  Widget build(BuildContext context) {
    // 获取当前设备底部系统安全区高度
    final double bottomSafePadding = MediaQuery.of(context).padding.bottom;
    return GridView.count(
      crossAxisCount: 2,
      // 总预留高度 = 系统安全区高度 + 悬浮组件遮挡高度
      padding: EdgeInsets.only(bottom: bottomSafePadding + 80),
      children: [...],
    );
  }
  

• 方案3：单独给最后一个列表项加占位
  如果不想给整个GridView设置内边距，可在构建列表项时判断索引，仅给最后一项追加对应高度的占位组件：

  itemBuilder: (context, index) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 原有列表项内容：图片、文字等
        GridItemContent(),
        // 仅最后一项追加底部占位
        if (index == itemTotalCount - 1) const SizedBox(height: 80)
      ],
    );
  }
  

调试时可通过热重载实时调整预留高度数值，直到最后一项内容完全显示无遮挡即可。

内容的提问来源于stack exchange，提问作者Mustafa Cüneyd Adıyaman