Flutter Webview Plugin中软键盘弹出时SingleChildScrollView无法上滑

你的问题核心是Android端WebView在软键盘弹出后，SingleChildScrollView无法正常滚动，这通常和WebView的布局约束、Android系统窗口调整策略以及WebView自身设置有关。以下是针对性解决方案：

1. 移除固定高度的SizedBox约束 #

当前代码中给SingleChildScrollView的子节点设置了与屏幕等高的SizedBox，这会让SingleChildScrollView误以为内容高度始终等于屏幕高度，即使软键盘弹出后可用高度缩小，也无法触发滚动。修改方式如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: true,
    body: SingleChildScrollView(
      // 移除固定高度的SizedBox，让WebView自适应内容高度
      child: const WebviewController(),
    ),
  );
}

如果必须保留全屏布局，改用LayoutBuilder动态获取可用高度，而非直接使用MediaQuery的固定屏幕高度：

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: true,
    body: LayoutBuilder(
      builder: (context, constraints) {
        return SingleChildScrollView(
          child: SizedBox(
            height: constraints.maxHeight,
            width: constraints.maxWidth,
            child: const WebviewController(),
          ),
        );
      },
    ),
  );
}

2. 配置WebView的Android端窗口调整策略 #

若使用webview_flutter插件，需在WebView初始化配置中明确设置Android窗口调整模式，确保软键盘弹出时WebView能正确响应布局变化：

在你的WebviewController中修改WebView设置：

WebView(
  initialUrl: 'your_target_url',
  // 配置Android特定参数
  androidSettings: AndroidSettings(
    useHybridComposition: true,
    // 设置为adjustResize，让WebView随窗口调整大小
    windowSoftInputMode: AndroidWindowSoftInputMode.adjustResize,
  ),
  // 其他配置项...
)

3. 监听键盘高度变化动态调整WebView高度 #

通过监听MediaQuery的viewInsets变化，手动调整WebView高度，确保SingleChildScrollView能感知内容高度变化：

class _MyHomePageState extends State {
  double _keyboardHeight = 0;

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    final viewInsets = MediaQuery.of(context).viewInsets.bottom;
    setState(() {
      _keyboardHeight = viewInsets;
    });
  }

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        child: SizedBox(
          height: screenHeight - _keyboardHeight,
          width: MediaQuery.of(context).size.width,
          child: const WebviewController(),
        ),
      ),
    );
  }
}

4. 检查WebView内部H5页面的meta标签 #

如果WebView加载的H5页面设置了固定视口，也可能导致滚动异常。确保H5页面的meta标签包含正确的视口配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

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