如何在 setState 上更新 webview 的 url？答案

【问题标题】：How to update webview's url on setState flutter?如何在 setState 上更新 webview 的 url？
【发布时间】：2019-05-18 15:08:29
【问题描述】：

我需要用我的 setState 更新 webview 的 url。该怎么做？

我在构造函数上设置的初始 url 已成功加载。但是当我尝试通过我的抽屉菜单通过 onTap 方法加载新的时它不起作用。

...
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 方法？请帮忙？

【问题讨论】：

标签： dart flutter

【解决方案1】：

在flutter webview上苦苦挣扎了很久，还是不太满意……

但关键是您从 webview 的 onWebViewCreated 方法获得的 WebController 实例。初始化的 WebViewController 的实例有一个方法叫做 loadUrl('your_new_url')

所以您可以在 onTap 处理程序中调用以下操作：

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

在 Flutter 中使用 WebViews 时，我在使用 setState 时遇到了问题，因为它会触发整个页面的重建，包括重新初始化的 webview，当然还会重新加载页面......

但这大多不是你想要的结果，所以如果你想控制 webview（它将更改为 url，返回浏览器历史记录或执行 javascript）你应该通过从 onWebViewCreated 方法初始化的 WebController 来处理它

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

_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 团队能给我们提供更详细的信息和教程

【讨论】：