Flutter中CustomScrollView内组件阴影在键盘弹出后滚动闪烁问题

这个闪烁问题由Flutter布局重排和阴影绘制的冲突导致：

• 你设置了Scaffold.resizeToAvoidBottomInset = true，键盘弹出/收起时会触发Scaffold整体布局尺寸重计算，CustomScrollView的视口边界会同步变化
• BoxShadow的模糊效果需要在组件绘制阶段实时计算参数，滚动时视口重绘和键盘布局重排的帧时序不一致，就会出现阴影参数计算偏差，表现为闪烁
• 额外设置cacheExtent: double.maxFinite会强制缓存所有sliver组件，反而提升了全局重绘的压力，加剧闪烁现象

方案1：给带阴影的组件包裹RepaintBoundary（最优，改造成本最低） #

强制带阴影的组件使用独立渲染层，只要组件本身属性没有变化，就不会跟随全局重绘重新计算阴影，直接复用已有渲染结果：

SliverToBoxAdapter(
  child: RepaintBoundary( // 新增这一层包裹
    child: Container(
      height: 100,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(10.scaled),
        boxShadow: const [
          BoxShadow(
            color: Colors.black,
            blurRadius: 15.0,
          ),
        ],
      ),
    ),
  ),
)

方案2：手动适配键盘高度，关闭Scaffold自动resize #

关闭resizeToAvoidBottomInset避免全局布局重排，自己通过MediaQuery获取键盘高度给CustomScrollView加底部内边距适配：

return Scaffold(
  resizeToAvoidBottomInset: false, // 关闭自动resize
  body: Stack(
    children: [
      Padding(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom, // 手动适配键盘高度
        ),
        child: CustomScrollView(
          cacheExtent: MediaQuery.of(context).size.height * 0.5, // 替换为合理缓存范围，不要用double.maxFinite
          slivers: [
            // 原有sliver内容保持不变
          ],
        ),
      ),
    ],
  ),
);

方案3：兜底兼容方案 #

如果前两个方案仍有问题，可以尝试：

• 把BoxShadow替换为Material组件的elevation属性生成阴影，Material组件自带独立渲染层优化，阴影绘制稳定性更高
• 如果你使用的是Flutter 3.10+版本，开启Impeller渲染器，该渲染器对阴影绘制的性能和稳定性做了大量优化，基本可以消除这类闪烁问题

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