下拉刷新Flutter中的WebView页面

Question

我已经使用WebView创建了一个Flutter应用程序

有没有办法向下滑动以刷新网页

我正在使用“webview_flutter_plugin”插件

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Stack(
        children: <Widget>[
          Container(
            child: Center(
              child: Text(_title),
            ),
          ),
        ],
      )),
      body: SafeArea(
          child: WebView(
              key: _key,
              javascriptMode: JavascriptMode.unrestricted,
              initialUrl: _url)),
    );
  }
}

- esxzawq

---

嗨，你成功地完成了这个吗？ - KDC

Answer 1

使用flutter_inappwebview插件

flutter_inappwebview: ^5.0.5+2

以下是一个示例：

late PullToRefreshController pullToRefreshController;
final MyInAppBrowser browser =  MyInAppBrowser();



@override
  void initState() {
    super.initState();

    pullToRefreshController = PullToRefreshController(
      options: PullToRefreshOptions(
        color: Colors.black,
      ),
      onRefresh: () async {
        if (Platform.isAndroid) {
          browser.webViewController.reload();
        } else if (Platform.isIOS) {
          browser.webViewController.loadUrl(
              urlRequest: URLRequest(url: await browser.webViewController.getUrl()));
        }
      },
    );
    browser.pullToRefreshController = pullToRefreshController;
  }

InAppWebView(
                initialUrlRequest: URLRequest(
                    url: Uri.parse(widget.url)
                ),
                initialOptions: InAppWebViewGroupOptions(
                    crossPlatform: InAppWebViewOptions(

                    ),
                    ios: IOSInAppWebViewOptions(

                    ),
                    android: AndroidInAppWebViewOptions(
                        useHybridComposition: true
                    )
                ),
                onWebViewCreated: (InAppWebViewController controller) {
                  webView = controller;
                },
                onLoadStart: (controller, url) {
                  setState(() {
                    this.url = url?.toString() ?? '';
                  });
                },
                onLoadStop: (controller, url) async {
                  setState(() {
                    this.url = url?.toString() ?? '';
                  });
                },
                onProgressChanged: (controller, progress) {
                  setState(() {
                    this.progress = progress / 100;
                    if(progress == 100){
                      _isRefreshing = false;
                    }
                  });
                },
              ),

- Chirag Kalathiya

Answer 2

我找到了一个解决方案，可以使用手势识别器实现webview下拉刷新。只需在您的webview小部件中添加以下代码即可。

WebView(
              key: UniqueKey(),
              initialUrl: 'https://summachar.app',
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController webViewController) {
                _controller = webViewController;
              },
              onPageFinished: (String str) {
                myModel.stopLoading();
              },
              onPageStarted: (String str) {
                myModel.startLoading();
              },
              gestureRecognizers: Set()
                ..add(Factory<VerticalDragGestureRecognizer>(
                    () => VerticalDragGestureRecognizer()
                      ..onDown = (DragDownDetails dragDownDetails) {
                        _controller.getScrollY().then((value) {
                          if (value == 0 &&
                              dragDownDetails.globalPosition.direction < 1) {
                            _controller.reload();
                          }
                        });
                      })),
            ), 

- Shalin Shah

Answer 3

这个问题不容易解决，但你可以尝试这种方法。

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:fluttertoast/fluttertoast.dart';

int scheck;
WebViewController controllerGlobal;
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIOverlays([]);
  runApp(
    new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new WebViewEx(),
    ),
  );
}

class WebViewEx extends StatefulWidget {
  @override
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewEx> {
  bool check, check1;
  ScrollController _scrollController;
  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
    super.initState();
    check = false;
    check1 = false;
  }

  _scrollListener() {
    if (_scrollController.offset <=
            _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      controllerGlobal.reload();
    }
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => controllerGlobal.goBack(),
      child: ListView(
        physics: ClampingScrollPhysics(),
        shrinkWrap: true,
        children: [
          Container(
            padding: EdgeInsets.all(10),
            height: MediaQuery.of(context).size.height,
            child: WebView(
              initialUrl: '...............',
              gestureNavigationEnabled: true,
              debuggingEnabled: true,
              gestureRecognizers: [
                Factory(() => PlatformViewVerticalGestureRecognizer()),
              ].toSet(),
              javascriptMode: JavascriptMode.unrestricted,
              onPageFinished: (String url) {
                setState(() {
                  bool temp = check;
                  check = true;
                  if (!temp) controllerGlobal.scrollBy(0, 10);
                });
              },
              onWebViewCreated: (WebViewController webViewController) {
                controllerGlobal = webViewController;
              },
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}

class PlatformViewVerticalGestureRecognizer
    extends VerticalDragGestureRecognizer {
  PlatformViewVerticalGestureRecognizer({PointerDeviceKind kind})
      : super(kind: kind);

  Offset _dragDistance = Offset.zero;

  @override
  void addPointer(PointerEvent event) {
    startTrackingPointer(event.pointer);
  }

  @override
  void handleEvent(PointerEvent event) {
    _dragDistance = _dragDistance + event.delta;
    controllerGlobal.getScrollY().then((value) {
      print(value);
      if (value < 5) {
        Fluttertoast.showToast(
            msg: "RELOADING",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.BOTTOM,
            timeInSecForIosWeb: 1,
            backgroundColor: Colors.amber[800],
            textColor: Colors.black,
            fontSize: 16.0);
        controllerGlobal.reload();
      }
    });
    // if (event is PointerMoveEvent) {
    //   final double dy = _dragDistance.dy.abs();
    //   final double dx = _dragDistance.dx.abs();

    //   if (dy > dx && dy > kTouchSlop) {
    //     // vertical drag - accept
    //     resolve(GestureDisposition.accepted);
    //     _dragDistance = Offset.zero;
    //   } else if (dx > kTouchSlop && dx > dy) {
    //     // horizontal drag - stop tracking
    //     stopTrackingPointer(event.pointer);
    //     _dragDistance = Offset.zero;
    //   }
    // }
  }

  @override
  String get debugDescription => 'horizontal drag (platform view)';

  @override
  void didStopTrackingLastPointer(int pointer) {}
}

- Sohaib Aslam

Answer 4

SwipeDetector做到了。

在pubspec.yaml中：

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_plugin: ^0.3.0+2
  swipedetector: ^1.2.0

导入：

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

在 State 类中：

final flutterWebviewPlugin = new FlutterWebviewPlugin();

@override
  Widget build(BuildContext context) {
    return SwipeDetector(
      child: WebviewScaffold(
        url: _url,
        withJavascript: true,
        withZoom: false,
        appBar: AppBar(
          title: Stack(
            children: <Widget>[
              Container(child: Center(child: Text(_title))),
            ],
          ),
          elevation: 1,
        ),
      ),
      onSwipeDown: () {
        flutterWebviewPlugin.reload();
      },

      swipeConfiguration: SwipeConfiguration(       
          verticalSwipeMinVelocity: 100.0,
          verticalSwipeMinDisplacement: 50.0,
          verticalSwipeMaxWidthThreshold: 100.0,
          horizontalSwipeMaxHeightThreshold: 50.0,
          horizontalSwipeMinDisplacement: 50.0,
          horizontalSwipeMinVelocity: 200.0),
    );

- esxzawq

---

现在的Webview无法滚动。 - That's Enam

为什么这个答案被接受了，它根本不起作用。 - Rizky Ramadhan

据我所知，SwipeDetector 重写了 InAppWebView 的滑动行为。当您想要“检测”更改时，这是可以的，但对于大多数用户来说，当您在页面顶部进行快速向下滑动时，可能希望刷新页面。您解决了这个问题吗？ - J.Wincewicz

我无法滚动我的 Web 视图。 - Abbas Jafari