如何在 Flutter 中重新加载 webview? [英] How to reload webview in Flutter?

问题描述

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

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() 但这会指向全屏 webview 并覆盖抽屉和应用栏.

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
  ),
}

下面是我的 webview 小部件:

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().将 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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！