resizeToAvoidBottomInset设为true时与InteractiveViewer兼容问题

问题原因 #

问题核心在于InteractiveViewer设置了constrained: false，此时它会脱离父组件的布局约束，再加上子容器高度设为2000，导致整个Stack的实际高度远超屏幕尺寸，使得Scaffold的resizeToAvoidBottomInset无法正确计算键盘弹出时的布局偏移。同时，TextField通过Positioned(bottom: 0)固定在底部，没有响应键盘高度变化的逻辑，最终被键盘遮挡。

解决方案 #

方案1：动态计算TextField的底部偏移

通过MediaQuery获取键盘弹出时的高度，动态调整Positioned的bottom值，让TextField自动上移：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: Stack(
        children: [
          InteractiveViewer(
            constrained: false,
            child: Container(
              color: Colors.blue[50],
              height: 2000,
              width: double.infinity,
              child: const Center(child: Text('Zoom or pan')),
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            // 动态获取键盘高度，调整底部偏移
            bottom: MediaQuery.of(context).viewInsets.bottom,
            child: Container(
              color: Colors.white,
              padding: const EdgeInsets.all(16.0),
              child: const TextField(
                decoration: InputDecoration(
                  hintText: 'Type here...',
                  border: OutlineInputBorder(),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

方案2：将TextField放在Scaffold的bottomNavigationBar中

利用Scaffold内置的bottomNavigationBar布局管理能力，自动处理键盘弹出时的上移逻辑，无需手动计算：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: InteractiveViewer(
        constrained: false,
        child: Container(
          color: Colors.blue[50],
          height: 2000,
          width: double.infinity,
          child: const Center(child: Text('Zoom or pan')),
        ),
      ),
      // 把TextField移到bottomNavigationBar中
      bottomNavigationBar: Container(
        color: Colors.white,
        padding: const EdgeInsets.all(16.0),
        child: const TextField(
          decoration: InputDecoration(
            hintText: 'Type here...',
            border: OutlineInputBorder(),
          ),
        ),
      ),
    );
  }
}

说明 #

• 方案1适合需要保留Stack布局结构的场景，通过动态获取键盘高度实现精准偏移。
• 方案2更简洁，利用Scaffold的原生特性，无需额外处理布局逻辑，同时完全保留InteractiveViewer的缩放平移功能。

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