如何在Flutter中重新加载Webview?

问题描述

在Flutter应用中，当我按下应用栏上的刷新图标按钮时，我想重新加载Webview页面.我使用的是官方的webview_flutter，并且不希望使用flutter_webview_plugin，因为我有一个侧抽屉.关于如何刷新网页视图的任何想法?

In a Flutter app, I would like to reload the Webview page when I press the refresh icon button on the appbar. I am using the official webview_flutter and do not want to use the flutter_webview_plugin as I have a side drawer. Any ideas as to how to refresh the webview page?

我尝试使用setState()重建同一页面，但该应用程序不会自行重建.我也尝试过使用navigator.push()，但这会定向到全屏Web视图，并覆盖抽屉和应用程序栏.

I've tried using setState() to rebuild the same page but the app doesn't rebuild itself. I've also tried using navigator.push() but this directs to a fullscreen webview and covers the drawer and appbar.

Widget build(BuildContext context){
return Scaffold(
  appBar: AppBar(
    title: Text(widget.drawerItems[_selectedDrawerIndex].title, style: TextStyle(
      shadows: <Shadow>[
        Shadow(
          offset: Offset(1.0, 1.0),
          blurRadius: 10.0,
          color: Color(0xff185B1E),
        ),
      ],
      color: Colors.white,
    ),
  ),
    backgroundColor: Color(0xff9ABDFF),
    iconTheme: IconThemeData(color: Colors.white),
    actions: <Widget>[

      IconButton(
        icon: Icon(Icons.refresh),
        color: Colors.white,
        onPressed: () {
          setState((){
            _selectedDrawerIndex = 3;
            //refresh webview here
          });
        },
      ),
    ]
    body: _getDrawerItemWidget(_selectedDrawerIndex),
    //_getDrawerItemWidget refers to a webview page
  ),
}

以下是我的网络视图小部件:

Below is my webview widget:

class Web1 extends StatelessWidget{
  @override

  Widget build(BuildContext ctxt) {
    return WebView(
        key: UniqueKey(),
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: 'http://www.google.com',
    );
  }
}

推荐答案

首先，您必须获取WebViewController并将其存储.为此，将WebView移至StatefulWidget(我们将其命名为WebViewContainer)，然后将onWebViewCreated回调传递给它.

First you have to obtain WebViewController and store it. To do it move the WebView to StatefulWidget (let's name it WebViewContainer) and pass onWebViewCreated callback to it.

现在，您可以通过调用webViewController.reload()方法来重新加载WebView.

Now you are able to reload WebView by calling webViewController.reload() method.

第二件事是从外部进行重新加载触发.有多种方法可以做到，我认为最简单的选择是使用GlobalKey.因此，您需要创建一个final webViewKey = GlobalKey<WebViewContainerState>().将webViewKey传递给WebViewContainer构造函数.之后，您将可以通过webViewKey.currentState访问WebViewContainerState.

Second thing to do is to make reload trigger from outside. There are multiple ways to do it, I think the easiest option would be to use GlobalKey. So you need to create a final webViewKey = GlobalKey<WebViewContainerState>(). Pass the webViewKey to WebViewContainer constructor. After that you'll be able to access WebViewContainerState through webViewKey.currentState.

示例代码:

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

final webViewKey = GlobalKey<WebViewContainerState>();

class WebViewPage extends StatefulWidget {
  @override
  WebViewPageState createState() => WebViewPageState();
}

class WebViewPageState extends State<WebViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WebView example"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              // using currentState with question mark to ensure it's not null
              webViewKey.currentState?.reloadWebView();
            },
          )
        ],
      ),
      body: WebViewContainer(key: webViewKey),
    );
  }
}

class WebViewContainer extends StatefulWidget {
  WebViewContainer({Key key}) : super(key: key);

  @override
  WebViewContainerState createState() => WebViewContainerState();
}

class WebViewContainerState extends State<WebViewContainer> {
  WebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return WebView(
      onWebViewCreated: (controller) {
        _webViewController = controller;
      },
      initialUrl: "https://stackoverflow.com",
    );
  }

  void reloadWebView() {
    _webViewController?.reload();
  }
}

这篇关于如何在Flutter中重新加载Webview?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！