Flutter中flutter_webview_plugin依赖报错及WebView布局需求问题

嘿，我来帮你搞定这俩问题！先解决你眼前的包找不到报错，再给你搞定WebView不占满屏加下方ListView的布局。

第一步：解决"包未识别"的报错 #

你已经在pubspec里加了依赖还是报错？大概率是这几个小细节没做好：

• 一定要执行flutter pub get！添加完依赖后必须跑这个命令，让Flutter把包拉到本地。有时候光写pubspec不执行这个，IDE根本识别不到。
• 检查pubspec.yaml的缩进格式！Flutter对这个特别严格，dependencies:下面的每个依赖项前面必须有2个空格（不能用tab）。你贴的配置里格式有点乱，正确的写法应该是这样：

  dependencies:
    flutter:
      sdk: flutter
    url_launcher: ^0.4.1
    async_loader: "^0.1.1"
    json_annotation: ^0.2.2
    flutter_webview_plugin: "^0.1.5"
    cupertino_icons: ^0.1.0
  # url_launcher: ^3.0.0 这个注释掉的没问题
  dev_dependencies:
    flutter_test:
      sdk: flutter
    json_serializable: ^0.4.0
  

• 重启你的IDE！不管是Android Studio还是VS Code，有时候缓存会抽风，重启后重新加载项目，依赖就能被识别了。

第二步：实现WebView不占满屏+下方ListView的布局 #

说句实在的，flutter_webview_plugin这个包已经很久没维护了，更推荐用官方的webview_flutter包，兼容性和稳定性都更好。我给你两种方案，你选：

方案一：用官方webview_flutter（推荐） #

1. 先更新pubspec依赖：

   dependencies:
     webview_flutter: ^4.4.0 # 可以去pub.dev看最新版本号
   

2. 布局代码示例，直接就能用：

   import 'package:flutter/material.dart';
   import 'package:webview_flutter/webview_flutter.dart';
   
   class WebViewPlusListView extends StatefulWidget {
     @override
     _WebViewPlusListViewState createState() => _WebViewPlusListViewState();
   }
   
   class _WebViewPlusListViewState extends State<WebViewPlusListView> {
     late WebViewController webController;
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text("WebView + ListView")),
         body: Column(
           children: [
             // 上半部分WebView，这里设为屏幕高度的一半，你可以自己调
             SizedBox(
               height: MediaQuery.of(context).size.height / 2,
               child: WebView(
                 initialUrl: "https://example.com",
                 onWebViewCreated: (controller) {
                   webController = controller;
                 },
                 javascriptMode: JavascriptMode.unrestricted,
               ),
             ),
             // 下半部分ListView，用Expanded让它占满剩余空间
             Expanded(
               child: ListView.builder(
                 itemCount: 20,
                 itemBuilder: (context, index) {
                   return ListTile(
                     title: Text("列表项 $index"),
                     subtitle: Text("这是第${index+1}个列表内容"),
                   );
                 },
               ),
             ),
           ],
         ),
       );
     }
   }
   

方案二：继续用flutter_webview_plugin #

如果你非要用这个包，别用它的WebviewScaffold（那是个完整的页面，没法嵌套），直接用WebView组件就行：

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class WebViewPlusListView extends StatelessWidget {
  final _webviewPlugin = FlutterWebviewPlugin();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("WebView + ListView")),
      body: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height / 2,
            child: WebView(
              url: "https://example.com",
              javascriptMode: JavascriptMode.unrestricted,
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (context, index) {
                return ListTile(title: Text("列表项 $index"));
              },
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _webviewPlugin.dispose(); // 记得销毁资源，避免内存泄漏
    super.dispose();
  }
}

先把依赖的问题搞定，再试布局，应该就能顺利运行了！

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