首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么在WebView上url改变后initState不能工作?

在WebView上,当url改变后,initState()方法不会被调用的原因是因为initState()方法只会在StatefulWidget的生命周期中被调用一次,即在widget被插入到widget树中时调用。而WebView的url改变并不会导致widget被重新插入到widget树中,因此initState()方法不会被再次调用。

要在WebView上监听url的改变并执行相应的操作,可以使用WebView的onPageFinished回调方法。onPageFinished会在WebView加载完页面后被调用,可以在该方法中执行需要的操作。

以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  WebView _webView;
  String _currentUrl;

  @override
  void initState() {
    super.initState();
    _webView = WebView(
      initialUrl: 'https://example.com',
      onPageFinished: (String url) {
        setState(() {
          _currentUrl = url;
        });
        // 在页面加载完成后执行相应操作
        // ...
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
      ),
      body: _webView,
    );
  }
}

在上述示例中,我们创建了一个MyWebView的StatefulWidget,并在initState()方法中初始化了WebView,并设置了onPageFinished回调方法。在onPageFinished回调方法中,我们可以获取到当前的url,并执行相应的操作。

注意:上述示例中使用了webview_flutter插件来实现WebView功能,需要在pubspec.yaml文件中添加依赖。

推荐的腾讯云相关产品:腾讯云移动浏览器(Tencent Mobile Browser),产品介绍链接地址:https://cloud.tencent.com/product/tmb

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

flutter集成admob库时碰到的至今为止都没解决的坑

但应用做完,自己也各个平台做了些推广,对针对产品做了些seo和aso,但三个多月时间过去,每天还是只有几个人使用。...不过这里注意一点,选区的时候一定要注意,选定完不能修改了。 由于我的playstore 账号是中国大陆区的,所以admob也选择了相同的区。 第二步admob添加应用和添加广告单元。...开通完admob,就要添加应用了。 由于应用已架了一段时间,所以添加应用时,直接选择应用商店并输入应用包名就可以找到并添加了。...添加完第一时间相关的应用对应的官网上添加ads.txt文件,然后admob验证应用。只有验证完成的应用才会请求到广告。...原来flutter版的admob实现方式是flutter中嵌套一个webview来显示广告,而flutter对webview的支持的不够好,导致显示的性能非常低。

7710
  • Flutter中的html内容加载

    一篇文章Flutter 中的下拉刷新和拉加载中,我介绍了如何在Flutter中实现下拉刷新和拉加载的效果,今天我们继续以上文中的代码为例,来介绍如何加载HTML文档内容。..._page = 1; _requestData(); }); } @override void initState() { super.initState();...接下来我们介绍一下如何通过WebView来加载html。通过WebView加载html内容,实际就是应用内的浏览器展示网页内容。...Flutter中,实现WebView加载html内容的第三方组件有很多,这里我们给推荐flutter_inappbrower这一个第三方组件。...flutter_html可用于加载轻量级的html文本内容,对于复杂的远程html内容,我们需要使用webview来加载,flutter_inappbrower是Flutter中实现WebView的最好用的第三方组件

    16.6K43

    Flutter 简易新闻项目目标效果对比简介代码代码地址

    image image image image image image 简介 这是一个建议的新闻客户端 页面非常简单 通过网络请求加载 分类数据 和 分类详情数据 (key都在代码里了,轻量使用~) UI几乎是没有任何特点...: ^0.1.6 #webview shared_preferences: ^0.4.2 #持久化数据 url_launcher: ^3.0.3 #调用系统浏览器...代码 使用单例来保存数据 由于分类原则是没有变化的,我这里就使用单例来保存从API请求的分类数据,减少请求次数(API请求次数有限) class UserSinglen { List<WeType...() { // TODO: implement initState super.initState(); navigationIcons = [...currentWidget, ), bottomNavigationBar: bottomNavigationBar, ), ); } } 首页 首页实时获取存储本地的已选择分类

    1.3K20

    Flutter 2.8 release 发布,快来看看新特性吧

    与往常一样,Flutter 的工作的第一位就是保证质量,我们花费了大量时间来确保 Flutter 支持的设备范围内可以尽可能平稳和稳健地运行。...所有这些改进使得 Google Pay 低端 Android 设备运行时的启动延迟降低了 50%,高端设备降低了 10%。...WebView 3.0 这次 webview_flutter 的另一个新版本是,这里提高了版本号,是因为新功能的数量增加了,而且还因为 Web 视图 Android 工作方式可能发生了重大变化。...example')), body: const WebView(initialUrl: 'https://flutter.dev'), ); } Web运行时它也会按开发者的预期工作...它仅支持简单的 URL 加载,无法控制加载的内容或者和加载的内容交互 有关更多信息,请查看 webview_flutter_web Readme 但是 webview_flutter_web 由于太收欢迎

    4.2K20

    APP常用跨端技术栈深入分析

    随着技术的发展,产生了越来越多的端,如Android、iOS、Mac、Windows、Web、Fuchsia OS、鸿蒙等,而随着公司业务的发展,出现了越来越多的业务场景;作为APP开发人员,日常工作中难免会碰到以下问题...通过以上所有分析,可以回答前面提出的问题: 为什么原生和Flutter性能更好?主是都是经过布局绘制直接调系统或自带渲染引擎进行展示。 为什么ReactNative和Weex性能相对慢?...为什么H5页加载慢?主要因为连接和加载比较耗时,这里占大部分时间,连接和加载完以后基本就是WebView或浏览器本地可以完成的工作,后期优化也可以以此为切入点。...当然,对于新技术实践前期会有一些成本,但熟悉总的收益是长期的; 4、是否更好解决多端一致性,更好解决UI设计师UI审查时、测试同学测试过程中、业务方使用过程中发现的端与端并异问题,风格统一也是良好用户体验的重要体现...,用户第一,用户利益最大化即保证了公司的利益;对于非C端项目,可能需要考虑实现降本提效基础提升用户体验。

    2.3K10

    Flutter常用的布局和事件示例详解

    自定义一个LoadingWidget,传递isLoading是否正在加载中,child加载成功显示的布局.这样的好处就是我们可以在任何需要用到加载中的布局时,直接使用,统一管理.使用setState来改变...() { super.initState(); _handleRefresh(); } Future<Null _handleRefresh() async { try { HomeModel...CommonModel model = bannerList[index]; Navigator.push( context, MaterialPageRoute( builder: (context) = WebView...( url: model.url, title: model.title, statusBarColor: model.statusBarColor, hideAppBar: model.hideAppBar...scrollNotification.metrics.pixels); } }, child: _buildListView, ), 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值

    2.2K40

    Flutter 运行小程序的实操分享

    以我的实际情况来讲,公司应用采用的 Flutter 框架,同样的功能不可避免的就会存在 Flutter 应用开发和微信小程序开发兼顾的情况,这种重复造轮子的工作非常低效。为什么会存在这种情况?...、Android、Web、PC 。...Flutter 正在革命性的改变移动开发的生态系统,从面向各个终端的开发,转向面向框架开发,不仅会改变开发者的开发方式,也有越来越多的公司开始关注使用 Flutter。...但目前来讲,Flutter 并不支持小程序,Flutter for Web 虽然最后也会生成 JS 代码,但是 Flutter 生成的 JS 和 CSS 都是不能修改的。...config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' end endend3、Flutter API集成

    1.2K60

    跨平台技术演进

    ,体验不佳 不能运行在非微信环境内 没有window、document对象,不能使用基于浏览器的JS库 不能灵活操作 DOM,无法实现较为复杂的效果 页面大小、打开页面数量都受到限制 既然WebView... React 框架中,JSX 源码通过 React 框架最终渲染到了浏览器的真实 DOM 中,而在 React Native 框架中,JSX 源码通过 React Native 框架编译,与Native...也就是说仍不能真正实现严格意义的“一套代码,多平台使用”。另外,因为仍对ios 和android的原生细节有所依赖,所以需要开发者若不了解原生平台,可能会遇到一些坑。...改变线程模式。UI 更新不再同时需要在三个不同的线程触发执行,而是可以在任意线程同步调用 JavaScript 进行优先更新,同时将低优先级工作推出主线程,以便保持对 UI 的响应。...Skia作为渲染/GPU后端,Android和Fuchsia使用FreeType渲染,iOS使用CoreGraphics来渲染字体。

    2.4K20

    积木Sketch Plugin:设计同学的贴心搭档

    resources_webview.js,因此进行代码编写时,如果需要在html中引用此文件,也要使用打包的文件名,即:<script src=".....,甚至<em>改变</em>设计团队<em>工作</em>方式和流程。...与Xcode工程混合编译 首先,我们要明确一个问题,<em>为什么</em>要使用XCode工程? 虽然官方提供了JS API并承诺持续维护,但这项<em>工作</em>一直处于Doing状态,而且官方文档更新缓慢,没有明确的时间节点。...试了几个流行的插件,发现大部分均有此问题,这给设计师的<em>工作</em>造成了诸多不便。试想,我只是去打开Finder找一个文件,你<em>为什么</em>要把我的软件最小化?...<em>在</em>Github<em>上</em>留言<em>后</em>,很快得到了项目开发者Mathieu Dutour的官方回复,原来只需要设置一个hidesOnDeactivate属性即可。 等等!这不是Electron中的属性么?

    1.2K20

    小白必看,JSBridge 初探

    Android 的话,Webview 提供了 shouldOverrideUrlLoading 方法来提供给 Native 拦截 H5 发送的 URL Scheme 请求。...注入 API 基于 Webview 提供的能力,我们可以向 Window 注入对象或方法。JS 通过这个对象或方法进行调用时,执行对应的逻辑操作,可以直接调用 Native 的方法。...使用该方式时,JS 需要等到 Native 执行完对应的逻辑才能进行回调里面的操作。...如果你想改变一直被事折腾,希望开始能折腾事;如果你想改变一直被告诫需要多些想法,却无从破局;如果你想改变你有能力去做成那个结果,却不需要你;如果你想改变你想做成的事需要一个团队去支撑,但没你带人的位置;...如果你想改变既定的节奏,将会是“5 年工作时间 3 年工作经验”;如果你想改变本来悟性不错,但总是有那一层窗户纸的模糊… 如果你相信相信的力量,相信平凡人能成就非凡事,相信能遇到更好的自己。

    2.6K10

    关于移动互联网的跨平台技术演进

    ,体验不佳 不能运行在非微信环境内 没有window、document对象,不能使用基于浏览器的JS库 不能灵活操作 DOM,无法实现较为复杂的效果 页面大小、打开页面数量都受到限制 既然WebView...也就是说仍不能真正实现严格意义的“一套代码,多平台使用”。另外,因为仍对ios 和android的原生细节有所依赖,所以需要开发者若不了解原生平台,可能会遇到一些坑。...改变线程模式。UI 更新不再同时需要在三个不同的线程触发执行,而是可以在任意线程同步调用 JavaScript 进行优先更新,同时将低优先级工作推出主线程,以便保持对 UI 的响应。...Skia作为渲染/GPU后端,Android和Fuchsia使用FreeType渲染,iOS使用CoreGraphics来渲染字体。...Dart优势 很多人会好奇,为什么Flutter要用Dart,而不是用JavaScript开发,这里列下Dart的优势 Dart 的性能更好。

    1.7K30

    Android 关于WebView全方面的使用(项目应用篇)

    1、关于WebView的使用: ****与JS交互**** 拨打电话、发送短信、发送邮件 上传图片(版本兼容) 进度条设置 字体大小设置 返回网页一层、显示网页标题 全屏播放网络视频 ?...首页 2、文章说明 WebView的使用已经是老生常谈了,看到很多文章说了用法,但我很少看到全的或者是项目中可以直接使用的,都是看了很多,自己把功能都集合在一起。...) || url.startsWith("sms:") || url.startsWith(WebView.SCHEME_MAILTO)) { try {...4.3 字体大小设置 /** 设置字体默认缩放大小(改变网页字体大小,setTextSize api14被弃用)*/ ws.setTextZoom(100); 其中100为默认缩放比,通过设置缩放比来控制字体大小...上传图片.png 4.5 返回网页一层 返回网页一层及退出全屏等操作: @Overridepublic boolean onKeyDown(int keyCode, KeyEvent event)

    1.5K40

    Stateful 组件的生命周期​

    ,而 StatefulWidget 组件则可以直接改变当前组件的状态而无需重新创建新的实例。...生命周期二:initState initState 函数组件被插入树中时被 Framework 调用( createState 之后),此函数只会被调用一次,子类通常会重写此方法,在其中进行初始化操作...另外在此函数中不能调用 BuildContext.dependOnInheritedWidgetOfExactType,典型的错误写法如下: @override void initState() {...生命周期四:build 此方法是我们最熟悉的,方法中创建各种组件,绘制到屏幕。Framework会在多种情况下调用此方法: 调用 initState 方法。...为什么要加上如此判断?因为如果当前组件未插入到树中或者已经从树中移除时,调用 setState 会抛出异常,加上 mounted 判断,则表示当前组件树中。

    98910

    【Web技术】276- WebView缓存原理分析和应用

    Android,我们的WebView也支持这几个字段。但是我们可以通过代码去设置WebView的Cache Mode,而使得协议生效或者无效。...但是我的业务中,js文件的更新都是非覆盖式的更新,也就是时候每次改变js文件的时候,文件的url地址一定会发生变化,所以我希望浏览器能够缓存下来js,并且一直使用它,那么我就给它只设置为LOAD_CACHE_ELSE_NETWORK...但是5.1系统,/data/data/包名/app_webview/文件夹依然存在,只是4.4系统上面存储WebView自带缓存的app_webview/cache文件夹不再存在了(注意下App Cache...综上所述,WebView自带的浏览器协议支持的缓存,不同的系统版本,位置是不一样的。也许除了我root过的4.4、5.1以外,其他版本系统的WebView自带缓存还可能存在于不同的目录里面。...没有缓存的资源已经缓存的 HTML 中不能加载,即使有网络。

    1.6K30
    领券