首页
学习
活动
专区
工具
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中的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.1K10

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

跨平台技术演进

,体验不佳 不能运行在非微信环境内 没有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

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.1K60

小白必看,JSBridge 初探

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

2.5K10

积木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

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

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

,体验不佳 不能运行在非微信环境内 没有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

Stateful 组件的生命周期​

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

96310

技术博客不仅仅只是一个网站,还可以这样玩........

最近由于辞职在家找工作,所以可以抛弃所有工作的事情,去网吧玩玩游戏什么的,思维的放空自己。...作为一个iOS软件开发工程师,面试的过程中,往往会用到展示自己所做过的一些app之类的,So何不把自己的技术博客也做成一个app呢?...这个想法我脑海挥之不去,我是那种有想法就会去行动的人,首先我不会后台,不会写那些普通人看不到又不能缺少的接口,唯一有的就是一个自己的技术博客.........首先把完成的效果给大家展示一下。 ? home.png 首页的效果,感觉还可以吧? ? class.png 这个是分类的,页面还是非常不错的,完美适配!...:url usedEncoding:nil error:nil]; [webView loadHTMLString:str baseURL:url]; webView.opaque =

45730

【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.4K30

Android Webview与ScrollView的滚动兼容及留白处理的方法

“为嘛,我的webview加载出来的网页只显示很小一点,其他都不显示了?” ”当我重新刷新页面为什么webview会出现留白的情况?“ —————– 天啊,难道就不能好好的吗?!...为了解决项目中这些蛋疼的问题,试过不少方法,网上有说是网页中使用了不合理的overflow,的确,经证实使用不合理的overflow的确会造成网页加载嵌套在scrollview的webview只会显示很小的高度...由于网页页面加载内容的长度,或者ajax请求延迟,造成webview只能不断的增加高度,而当网页高度变小时,webview高度却不能自适应了,那么只能由我们手动的搞些事情了!..., url: String?, favicon: Bitmap?)..., url: String?) { super.onPageFinished(view, url) view?.

2.5K20
领券