WillpopScope 在 flutter webview 中行为不当

Question

更新：检查这个onwillpop方法。并告诉我可以做哪些改变。

onWillPop: () async {
        showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text("Xác nhận thoát"),
                content: Text("Bạn có chắc bạn muốn thoát?"),
                actions: <Widget>[
                  TextButton(
                    child: Text("VÂNG"),
                    onPressed: () {
                      SystemNavigator.pop();
                    },
                  ),
                  TextButton(
                    child: Text("KHÔNG"),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  )
                ],
              );
            });
        return Future.value(true);
      },

每当我打开网页并浏览网站时，后退按钮功能就无法正常工作， 当我按“返回”时，它会打开 willpopscope，而不是“返回”（就像网页浏览一样）

@override
  Widget build(BuildContext context) {
    WebViewController _controller;

    final Completer<WebViewController> _controllerCompleter =
        Completer<WebViewController>();
    return WillPopScope(
      child: netState
          ? Scaffold(
              body: Padding(
                padding: EdgeInsets.only(top: 32),
                child: WebView(
                  initialUrl: widget.homeURL,
                  zoomEnabled: false,
                  userAgent: 'random',
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated: (WebViewController webViewController) {
                    _controllerCompleter.future
                        .then((value) => _controller = value);
                    _controllerCompleter.complete(webViewController);
                  },
                  navigationDelegate: (NavigationRequest request) async {
                    if (request.url.startsWith(widget.homeURL) ||
                        request.url.contains("https://test-payment.momo.vn/") ||
                        request.url.contains("https://payment.momo.vn/") ||
                        request.url.startsWith(
                            "momo://app?action=payWithAppToken&amount=") ||
                        request.url.contains("google.com") ||
                        request.url.contains("facebook.com")) {
                      return NavigationDecision.navigate;
                    } else {
                      return _launchURL(request.url);
                    }
                  },
                ),
              ),

Answer 1

在新版本的 flutter 中

WillPopScope

已被 弃用 和

PopScope

应该使用。这是一个如何使用它的示例

@override
    Widget build(BuildContext context) {
      return PopScope(
       canPop: false,
       onPopInvoked: (bool didPop) async {
          if (didPop) return;
          await _canPop();
         },
         child: ...
      )}

函数_canPop()

Future<void> _canPop() async {
    final NavigatorState navigator = Navigator.of(context);
    if (await _controller.canGoBack()) {
      _controller.goBack();
    } else {
      navigator.pop();
    }
  }

编辑：

在 Flutter 稳定版本 3.24.0 中引入了

onPopInvokedWithResult

并取代了

onPopInvoked

。这是更新后的代码

@override
    Widget build(BuildContext context) {
      return PopScope(
       canPop: false,
       onPopInvokedWithResult: (bool didPop, _) async {
          if (didPop) return;
          await _canPop();
         },
         child: ...
      )}

canPop() 函数保持不变

Answer 2

首先从

_controller

方法中提取

build

WebViewController? _controller;

在

onWillPop

小部件的

WillPopScope

回调中指定何时必须通过webview导航回来

onWillPop: () async {
    final canGoBack = await _controller?.canGoBack() ?? false;
    if (canGoBack) {
      _controller?.goBack();
      return false;
    }
    return true;
  },

您的

build

方法的更新版本

@override
Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        final canGoBack = await _controller?.canGoBack() ?? false;
        if (canGoBack) {
          _controller?.goBack();
          return false;
        }
        return true;
      },
      child: ...