flutter - 有没有办法向 webview_flutter 小部件添加下拉刷新？

Question

我正在尝试创建一个 flutter 应用程序，它将在 WebView 中显示一个网站，我希望能够设置一个 RefreshIndicator，当用户在 webview 上下拉并刷新 WebView 时触发。

我可以使 WebView 正常工作，但 RefreshIndicator 仅适用于可垂直滚动的 View 。我已尝试将 WebView 作为唯一的子项添加到 ListView，但 WebView 不会下拉 ListView。

我试过将 RefreshIndicator 放在 Webview 周围，我也试过使用 PageView 而不是 ListView

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewContainer extends StatefulWidget {
  final url;

  WebViewContainer(this.url);

  @override
  createState() => _WebViewContainerState(this.url);
}

class _WebViewContainerState extends State<WebViewContainer> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  var _url;
  final _key = UniqueKey();

  _WebViewContainerState(this._url);

  // WebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        child: ListView(children: [
          Container(
            child: Center(child: Text('Top')),
          ),
          Container(
            height: MediaQuery.of(context).size.height,
            child: WebView(
              key: _key,
              initialUrl: _url,
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController webViewController) {
                _controller.complete(webViewController);
              },
              navigationDelegate: (navigationRequest) {
                return NavigationDecision.navigate;
              },
              gestureRecognizers: Set()
                ..add(Factory<VerticalDragGestureRecognizer>(
                    () => VerticalDragGestureRecognizer())),
              javascriptChannels: <JavascriptChannel>[
                _toasterJavascriptChannel(context),
              ].toSet(),
              onPageFinished: (String url) {
                print('Page Finished loading: $url');
              },
            ),
          ),
          Container(
            child: Center(child: Text('Bottom')),
          ),
        ]),
        onRefresh: _refreshWebView,
      ),
    );
  }

我想要的是一种只显示 Webview 的方法，当他们下拉 Webview 时它会刷新。另一种选择是，如果您在 Webview 中滚动到页面顶部，Webview 是否会下拉 ListView。

Answer 1

嗯，这是可以做到的。

1. 在创建 webView 时，将 gestureRecognizers 设置为 EagerGestureRecognizer()；

2. 实现一个扩展 VerticalDragGestureRecognizer 的 AllowMultipleGestureRecognizer，将 rejectGesture() 重写为 acceptGesture()；

3. 实现一个 RawGestureDetector，使用 AllowMultipleGestureRecognizer 作为“手势”；

4. 在RawGestureDetector中放一个LayoutBuilder()，目的是获取子上下文；

5. 将您的 webView 放入 LayoutBuilder。现在，webView 和 RawGestureDetector 都可以接收手势事件。

6. 实现将手势转换为滚动通知的转换层。您可能感兴趣的滚动通知是:ScrollStartNotification、OverscrollNotification、ScrollUpdateNotification 和 ScrollEndNotification。 RefreshIndicator 不需要 UserScrollNotification。这一层可能需要一些时间才能把事情做好；

7. 在RawGestureDetector 的回调函数:onStart()/onUpdte()/onEnd() 中，调用翻译层生成通知。然后使用您从 LayoutBuilder 获得的上下文来调用正在监听滚动事件的每个祖先小部件。使用 context.visitAncestorElements() 来实现这一点。

8. 修改 webView 的平台代码(Android 和 iOS)，以将监听器添加到 YOffset。监听器调用“ channel ”方法将偏移量传递给您的 flutter 代码。 6 中的转换层查看 YOffset 以生成正确的通知(例如 OverscrollNotification 或 ScrollUpdateNotification)。

9. 将 RawGestureDetector 放入 RefreshIndicator 中，您就完成了!

结果:结果相当令人失望。RefreshIndicator 的动画会导致 webView 重绘几次，从而导致屏幕闪烁和相当大的延迟。这绝对不是一个好的用户体验。 Flutter 不能很好地处理重型“插件”小部件，应避免对 webView 进行任何与动画相关的操作(例如推送/弹出)。

浪费时间。