Flutter嵌套Stack中CustomPaint键盘弹出时缩放变形如何解决？

问题根因 #

• Scaffold默认开启resizeToAvoidBottomInset: true属性，软键盘弹出时会压缩页面可用高度，导致外层Stack布局约束发生变化
• 代码中直接在build方法内调用MediaQuery.of(context).size获取尺寸，软键盘弹出时MediaQuery参数会实时更新，导致CustomPaint的size计算结果改变

解决方案 #

方案1：直接禁用页面自适应软键盘（最简便） #

如果你的登录表单位置靠上，不会被弹出的软键盘遮挡，直接给当前页面的Scaffold设置resizeToAvoidBottomInset: false即可，软键盘弹出时不会挤压页面布局，所有元素尺寸位置都会保持初始状态：

Scaffold(
  resizeToAvoidBottomInset: false, // 新增这一行
  body: // 你现有的Stack代码
)

提示：如果使用方案1后出现软键盘遮挡输入框的情况，可将表单所在的Column外层套上SingleChildScrollView，支持手动滚动查看被遮挡内容。

方案2：缓存初始屏幕尺寸，避免动态更新 #

如果你需要保留软键盘弹出时页面自动调整的能力，避免表单被遮挡，就提前缓存页面初始化时的屏幕尺寸，CustomPaint固定使用缓存值计算尺寸，不受后续MediaQuery变化影响：

1. 在State类中声明缓存变量：

late Size originalScreenSize;

2. 在initState中获取初始尺寸：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // 仅在页面首次渲染完成时获取一次原始屏幕尺寸
    originalScreenSize = MediaQuery.of(context).size;
  });
}

3. 替换CustomPaint的size取值：

CustomPaint(
  // 替换为缓存的原始尺寸，不要在build内实时调用MediaQuery
  size: Size(originalScreenSize.width, 400),
  painter: CurvedPainterTop(),
),
CustomPaint(
  size: Size(originalScreenSize.width, 800),
  painter: CurvedPainterBottom(),
),

方案3：固定CustomPaint父容器尺寸 #

给嵌套CustomPaint的外层Stack套上SizedBox，固定宽高为你需要的数值，CustomPaint会自动适配父容器尺寸，不会随键盘弹出变化：

Container(
  padding: const EdgeInsets.only(top: 120, bottom: 160, left: 20, right: 20),
  // 新增SizedBox固定尺寸，宽度取屏幕宽，高度按你需求设置
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    height: 800,
    child: Stack(
      children: [
        // 你的CustomPaint可以不用单独设置size，默认填充满父容器
        CustomPaint(painter: CurvedPainterTop()),
        CustomPaint(painter: CurvedPainterBottom()),
      ],
    ),
  ),
)

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