如何在setState flutter上更新Webview的URL? [英] How to update webview's url on setState flutter?

问题描述

我需要用setState更新Webview的URL.该怎么做?

I need to update webview's url with my setState. How to do that?

我在构造函数上设置的初始url已成功加载.但是，当我尝试通过onTap方法通过抽屉菜单加载新的菜单时，该按钮将无法正常工作.

The initial url I haved set on constructor have been loaded successfully. But it's not working when I try load the new one through my drawer menu by onTap method.

...
class _MyWebState extends State<MyWeb> {
  Completer<WebViewController> _controller = Completer<WebViewController>();
  final Set<String> _favorites = Set<String>();
  String url;
  Widget web;

  _MyWebState() {
    web = WebView(
      initialUrl: 'https://my.flazhost.com',
      onWebViewCreated: (WebViewController webViewController) {
        _controller.complete(webViewController);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MyWeb'),
        actions: <Widget>[
          NavigationControls(_controller.future),
          Menu(_controller.future, () => _favorites),
        ],
      ),
      body: web,
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              leading: FlutterLogo(
                size: 20,
              ),
              title: Text('Web AlQudwah'),
              onTap: () {
                setState(() {
                  web = WebView(
                    initialUrl: 'https://flazhost.com',
                    onWebViewCreated: (WebViewController webViewController) {
                      _controller.complete(webViewController);
                    },
                  );
                  Navigator.pop(context);
                });
              },
            ),
          ],
        ),
      ),
      floatingActionButton: _bookmarkButton(),
    );
  }
}
...

如何更新Webview的url onTap方法?请帮忙吗?

How to update webview's url onTap method? Please help?

推荐答案

我在混乱的Webview中挣扎了很长时间，但我对此仍然不太满意...

I struggled with the flutter webview for a long time, and I'm still not very happy with it...

但是关键是从Web视图的onWebViewCreated方法获得的WebController实例.初始化的WebViewController的实例具有一个名为loadUrl('your_new_url')

But the key is the WebController instance that you get from the onWebViewCreated method of the webview. The instance of the initialized WebViewController has a method called loadUrl('your_new_url')

因此您可以在onTap处理程序中调用以下命令:

So you can just call following in your onTap handler:

onTap: () { 
   _controller.loadUrl('your_new_url');
}

在扑朔迷离地使用WebView时，在使用setState时遇到了问题，因为它将触发整个页面的重建，包括重新初始化的Webview以及当然会重新加载页面...

When working with WebViews in flutter I experienced problems when using setState, because it will trigger a rebuild of whole page including the webview which gets reinitialized and of course reloads the page...

但是，这大部分不是期望的结果，因此，如果您想控制webview(wheater将更改为url，返回浏览器历史记录或执行javascript)，则应通过从onWebViewCreated方法初始化的WebController处理它

But that is mostly not the desired result, so if you want to controll the webview (wheater it will be changes to url, going back in browser history or executing javascript) you should handle it over the WebController initialized from the onWebViewCreated method

以下是WebViewController类最常用的方法:

Here are the most used methods of the WebViewController class:

_controller.currentUrl() // Gets current url from WebView
_controller.loadUrl('your_new_url'); // Loads new url
_controller.evaluateJavascript('your js code as a string') // Execute JS over WebView console
_controller.goBack() // Goes one step back in browser history
_controller.goForward() // Goes one step forwards in browser history
_controller.clearCache() // Clears cache of WebView

这确实令人困惑并且记录不清(特别是对于像我这样的初学者)，所以我希望Flutter团队能够为我们提供更多详细的信息和教程

It's really confusing and badly documented (espacially for beginners like me), so I hope the flutter team will provide us with more detailed information and tutorials

这篇关于如何在setState flutter上更新Webview的URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！