Flutter 如何固定背景图片使其不随键盘弹出拉伸变形

问题原因 #

键盘弹出时Flutter的Scaffold默认会压缩页面可视区域高度适配键盘，你的背景图使用BoxFit.fill属性会强制拉伸图片适配容器尺寸，因此容器高度压缩后图片就会变形。

解决方案 #

方案1：禁止页面自动适配键盘（最简单）

修改Scaffold的resizeToAvoidBottomInset属性为false，页面就不会因为键盘弹出调整高度，背景自然不会变形。

Scaffold(
  // 新增这行配置
  resizeToAvoidBottomInset: false,
  body: Container(
    width: double.infinity,
    height: double.infinity,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/joker.jpg'),
        fit: BoxFit.fill
      )
    ),
    // 你的原有页面内容
  )
)

注意：使用该方案后，页面不会自动适配键盘高度，请给输入区域外层包裹SingleChildScrollView，避免输入框被键盘遮挡。

方案2：背景与内容分层处理

使用Stack组件将背景图和上层内容分离，背景图固定适配屏幕初始尺寸，不受页面高度变化影响，上层内容正常适配键盘弹出逻辑。

Scaffold(
  body: Stack(
    children: [
      // 背景层，固定适配屏幕尺寸
      SizedBox.expand(
        child: Image.asset(
          'images/joker.jpg',
          // 推荐用BoxFit.cover替代fill，保持图片比例不拉伸，多余区域自动裁剪
          fit: BoxFit.cover,
        ),
      ),
      // 上层内容层，正常适配键盘
      SingleChildScrollView(
        child: // 你的原有页面内容，包括输入框等组件
      )
    ],
  )
)

可选优化

如果不需要强制背景图铺满整个容器，可以将fit参数从BoxFit.fill替换为BoxFit.cover（保持比例裁剪铺满）或BoxFit.contain（保持比例完整显示），也能避免拉伸变形问题。

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