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

seturlstrategy-页面重新加载不起作用:Flutter web 2.0

在Flutter web 2.0中,seturlstrategy是一个用于设置URL策略的函数。它用于控制当URL发生变化时页面如何重新加载。

URL策略是指决定页面重新加载的方式。在Flutter web中,有两种URL策略可供选择:

  1. Hash URL策略:使用哈希符号(#)来表示URL的变化。当URL的哈希部分发生变化时,页面会重新加载。这种策略适用于不支持HTML5历史API的浏览器。
  2. Path URL策略:使用路径(path)来表示URL的变化。当URL的路径部分发生变化时,页面会重新加载。这种策略适用于支持HTML5历史API的现代浏览器。

在Flutter web 2.0中,seturlstrategy函数用于设置URL策略。它接受两个参数:一个是URL策略类型,另一个是一个回调函数。

示例代码如下:

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

void main() {
  setUrlStrategy(PathUrlStrategy()); // 设置URL策略为Path URL策略
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Web Demo'),
        ),
        body: Center(
          child: Text('Hello, Flutter Web!'),
        ),
      ),
    );
  }
}

在上述示例中,我们使用了PathUrlStrategy来设置URL策略为Path URL策略。这意味着当URL的路径部分发生变化时,页面会重新加载。

需要注意的是,seturlstrategy函数应该在应用程序的入口点调用,以确保URL策略在整个应用程序中生效。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,用于托管应用程序和网站。详情请参考:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全可靠的云端存储服务,用于存储和管理大规模的非结构化数据。详情请参考:腾讯云对象存储
  • 腾讯云云数据库MySQL版:提供高性能、可扩展的关系型数据库服务,适用于各种规模的应用程序。详情请参考:腾讯云云数据库MySQL版

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和项目要求进行评估和决策。

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

相关·内容

Flutter Web:刷新与后退问题

前言 使用flutter开发web页面,在pc端使用就会面临刷新的问题。尤其是刷新时,本地变量清空导致页面问题,所以就需要考虑全局缓存的问题。...但是如果是web页面,通过浏览器刷新后发现arguments变成null的,所以说flutter内部并没有将这部分持久化,刷新就被清空了,这样就导致页面出错。...会关闭当前应用,但是浏览器并未关闭,所以会重新加载默认页面。注意这与上面pop结果是不一样的,因为这时候还没有执行pop,而且也不会执行到pop了。...并不是执行pop操作,而是执行setNewRoutePath操作,本质上应该是从浏览器的history中获取上一个页面的url,然后重新加载。...目前来看google的对flutter web的意图,还是开发移动web并在App中通过webkit这种内核使用,并没有想开发者使用flutter web来开发真正的web应用,或者后续会完善这部分。

2.5K30

迈向Flutter深水区:美团外卖Web-App一体化架构实践

是完全复用的;性能上我们经过 SDK 的优化定制后,Flutter Web 与现有 Web 项目在页面滚动上的指标差距已不大,可满足日常业务要求,首次加载的时间还有一定优化空间,我们也会持续对其进行探索...挑战主要有两点: 加载性能问题:Flutter Web 项目构建只暴露了 Flutter Build Web,我们无法直接进行更细粒度的个性化定制。...并且构建产物也比较简陋(只有一个 main.dart.js),缺少对静态资源的优化,影响页面加载性能。...我们对 Flutter SDK 进行了改造,页面滚动时,Canvas 是被缓存起来而不是重新创建,对滚动性能有比较明显的提升,足以应对大部分业务场景 3Flutter Web 是否值得尝试?...Flutter 2.0 的发布,稳定了对 Web 渠道产品级可用的能力,同时默认采用 CanvasKit 编译模式,对页面滚动性能有较大提升。

1.3K10
  • Flutter Web在美团外卖的实践

    由于 Flutter Web 自身实现了一套页面滚动机制,页面滚动过程中,会频繁计算位置信息,引起滚动区域内容被重新创建,最终导致页面滚动性能较差。...深入滚动性能与页面加载性能优化,使得 Flutter Web 能够满足基本的投产要求。...由于 Flutter Web 自身实现了一套页面滚动机制,页面滚动过程中,会频繁计算位置信息,引起滚动区域内容被重新创建,这就是为什么每次滚动都会创建 Canvas 的原因。...5.2 页面加载性能 如前文所述,我们实施了一系列针对 Flutter Web 的资源优化手段,使得页面加载性能有较大提升,其中页面完全加载时间大致由 1300ms(TP50) 降到了 580ms(TP50...,达到提效最大化; 跟进 Flutter 官方动向:Flutter 2.0 的发布,稳定了对 Web 的支持,同时默认采用 Canvaskit 编译模式,此模式下对页面滚动性能有较大提升。

    2.1K20

    阿里卖家 Flutter for Web 工程实践

    在今年(2021)三月份,Flutter 2.0 发布,FFW 正式进入 stable 分支。...FFW 需要的 Flutter 版本为 2.0+,而目前我们 App 端内的 Flutter 版本为 1.X+ ,要升级到 2.0+ 版本还需等待不确定的时间。...方式渲染 flutter build web --web-renderer html 两条命令的区别是目标页面以何种方式渲染,Flutter 官方对两种方式区别的解释如下: 总结来说如下: Html 方式...为了提升页面加载的体验,考虑可以做的事情如下: 等待过程优化 FFW 页面在 js 加载完成之前都是白屏,给人一种页面卡死的感觉,为此可以在 js 加载完成前增加加载动画不至于让页面一直白屏。...基础功能: 视频、音频播放能力待研究 兼容和优化 js 包拆分加载待研究 自定义字体文件优化待研究 畅想: App 中 Flutter 动态化:将 App 内的 Flutter 页面替换为 FFW,做成类似

    14510

    Flutter Plugin插件开发填坑指南

    坑点一: Flutter插件加载存在两个版本 由于Flutter自动依赖插件的方式存在两个版本(Registrar和FlutterPluginBinding), 因此我们在实现Android的插件的时候...旧的加载插件的方式,通过反射进行加载. onAttachedToEngine和 onDetachedFromEngine是 FlutterPlugin的接口方法,是flutter新的加载插件的方式. onAttachedToActivity...和 onDetachedFromActivity是 ActivityAware的接口方法,主要是用于获取当前flutter页面所处的Activity. onMethodCall是 MethodCallHandler...坑点五:访问国外网站工具对命令终端不起作用 本来以为好不容易认证通过了,这下总能上传成功吧,结果意外又出现了,我一直卡在 Uploading...,怎么也上传不成功. Uploading......tcp4 0 0 127.0.0.1.1087 *.* LISTEN 这时候再重新执行一下: export https_proxy=http://127.0.0.1:1087 export http_proxy

    1K20

    Flutter 3更新详解

    Web 端更新 我们针对 web 端的更新包括: 图像解码 在浏览器支持的情况下,Flutter web 现在可以自动检测并使用 ImageDecoder API。...Web 应用的生命周期 Flutter web 应用的新生命周期 API 提升了灵活性,可实现从托管 HTML 页面控制 Flutter 应用的引导程序,并支持使用 Lighthouse 分析您的应用的性能表现...加载指示器。 在 Flutter 应用之前显示的纯 HTML 交互式加载页。 请阅读官方文档 “自定义 web 应用初始化” 了解详细信息。...生成的 Flutter 3 应用将自动启用 2.0 版 Lint 套件。...我们建议大家运行 flutter pub upgrade --major-versions flutter_lints,将现有应用、package 和插件迁移到 2.0 版,以遵循 Flutter 最新

    3.5K20

    Flutter:Navigator2.0介绍及使用

    所以google后来又推出了Navigator2.0 Navigator2.0 Navigator1.0是通过Navigator来管理处理路由,而Navigator2.0则是通过Router来处理的,但是也需要...注意这里的两个逻辑,如果是首页则先清空;如果新页面与上一页一摸一样,则忽略,因为发现在web上setNewRoutePath会被重复调用。...这里我定义了三个页面,其中PageA是默认页面。三个页面都很简单,每个页面有两个按钮,一个打开新页面,一个回退。..._stack.last : null; 如果不实现这里,虽然页面可以切换,但是路由信息并没有更新,比如flutter web的应用在浏览器中,页面正常切换,但是地址栏并没有变化。...2)浏览器的回退按钮 经过测试发现,浏览器的后退按钮点击后并不执行pop操作,而是执行setNewRoutePath,这样就会导致回退的时候实际上_stack并没有移除当前页面,反而将上一个页面重新添加进来了

    83230

    Flutter混合栈路由实践与优化

    )时重新渲染出新页面。...(2)多版本的支持 得益于对 io.flutter 包非侵入式修改,我们验证了 Flutter SDK v1.17、v1.20、v1.22,v2.0 等版本上,都可以良好运行。 4....四、下一步做的事情 Flutter v2.0 升级与 View 级别的支持 3月4日,Google 发布 Flutter v2.0 稳定版,除了对 Web 更高质量的支持与引入空安全外。...虽然目前看起来仍未稳定,也有比较多的问题尚未解决,比如 Dart 层还是是资源隔离的,一套图片资源可能被加载多次。但这让我们看到了混合栈路由回归官方方案的可能。...下一步我们将继续探究 v2.0 的特性,用 v2.0 对多引擎的加持来实现 View 级别的支持。 结语 TRouter 是心悦项目解决 Flutter 路由痛点后的产物。

    2.7K51

    Flutter Web: 如何在页面中使用web原生组件及交互

    前言 flutter开发经常会与原生打交道,flutter web也一样,尤其在web开发时,因为flutter web还不成熟,第三方库缺少,很多功能需要依靠web原生来实现,比如音视频,录音等等...web页面,然后可以将这个组件放到flutter页面中,这样就可以在任意位置显示这个web页面。...即可 上面只是直接打开了一个页面,那么如果想使用一个web组件如何处理?...而使用动态viewType就不再有这样的问题,每次都会重新执行js。 交互 这种嵌入的web组件也会有与flutter进行交互的需求。...这个交互其实根flutter与js的交互是一样的,因为这时候的页面里也加载了这个组件的相关js文件(包括我们自己定义的ScriptElement),所以通过js.context.callMethod("

    2.1K40

    手机框架_移动端框架_跨平台_汇总_哪个好

    Weex能够完美兼顾性能与动态性,支持iOS、安卓、YunOS及Web等多端部署。...通过它,可以快速构建出风格统一的页面,提升开发效率。 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。...Muse UI 基于 Vue2.0 开发,Vue2.0是当下最快的前端框架之一,小巧,api友好,可用于开发的复杂单页应用 VUWE vuwe是一款基于微信WeUI所开发的,专用于Vue2的组件库。...Flutter 是谷歌的移动UI框架 可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。...在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

    1.8K10

    Flutter | 资源管理

    加载图片 例如加载一张图片,在 Flutter 中使用 pubspec.yaml 文件来管理所需要的文件 在加载图片之前,需要在根目录下创建一个文件夹,里面存放图片,以及它所对应分辨率的图片 如上图...,创建了 images 文件夹,然后放入图片,并创建对应分辨率的文件夹,将图片放进去即可 注意:flutter 默认是必须要创建 2.0x 和 3.0x,至于4.0x,可自行选择 图片准备好之后,就可以通过.../images/2.0x/icon.png 复制代码 然后在 pubspec.yaml 中,只需要包含: flutter: assets: - images/icon.png 复制代码 那么这两个...主需要将他们替换为适当大小的图片,保留原始文件名称 更新启动页 在 Flutter 框架加载时,Flutter 会使用本地机制绘制启动项,此启动页将持续到 Flutter 渲染应用程序的第一帧时 这意味着如果你不在应用程序的.../android/app/src/main,在 res/drawable/launch_background.xml,通过自定义 drawable 来实现自定义启动页面(你也可以直接换一张图片) <!

    1.9K20

    FlutterWeb性能优化探索与实践

    经过无数工程师两年多的努力,在今年年初(2021 年 3 月份),Flutter 2.0 正式对外发布,它将 FlutterWeb 功能并入了 Stable Channel,意味着 Google 更加坚定了多端复用的决心...此外 Skia 的 WebAssembly 文件大小达到了 2.5M,且 Skia 自绘引擎需要字体库支持,这意味着需要依赖超大的中文字体文件,对页面加载性能影响较大,因此目前并不推荐在 Web 中直接使用...下图展示了 Flutter 业务代码被转换成 Web 平台产物的流程,我们来具体进行分析: 图5 FlutterWeb 编译流程 Framework、Flutter_Web_SDK(Flutter_Web_SDK...但由于各平台(Android、iOS、Web)的具体实现是解耦的,因此我们的思路是定位各模块(Dart-SDK、Framework、Flutter_Web_SDK、flutter_tools)的 Web...,支持了资源预加载与按需加载,通过设定合理的加载时机,从而减小初始代码体积,提升页面首屏的渲染速度。

    1.7K20

    Flutter路由插件-r_router(全面适配Navigator2.0

    1.简介 在开发Flutter开发的过程中,路由跳转页面是十分常见的,市面上也有许许多多的路由插件包,例如fluro、ff_annotation_route、routermaster等等,但在个人使用上面...(需自行添加加载对话框) RRouter.addRoute(NavigatorRoute('/six', (ctx) async { Future.delayed(Duration(seconds:...})); 8.覆盖之前声明的路由 //后续插件可自动生成这个路由 RRouter.addRoute(NavigatorRoute('/', (ctx)=>HomePage())); // 没有登录,重新设置第一页为登录页面...Demo Home Page'), ); 使用Navigator2.0(墙裂推荐使用) return MaterialApp.router( title: 'Flutter Demo', theme...web限制需要可Json化) RRouter.navigateTo('/two', body: {'param': '我是参数(支持实体类,实体需可JSON化)'}); 3.传路径参数和查询参数 //

    1K10

    Flutter for Web:跨平台移动与Web开发的新篇章

    for Web应用,它创建了一个具有计数功能的页面。...main函数启动应用,MyApp是应用的入口点,MyHomePage是一个具有计数器功能的页面。_incrementCounter方法更新计数器,setState通知框架需要重新构建Widget。...热重载(Hot Reload) Flutter for Web支持热重载,允许开发者在开发过程中快速查看代码更改的效果,而无需重新启动应用。这对于快速迭代和调试非常有用。 2....阿里巴巴的闲鱼(Xianyu) 阿里巴巴旗下的二手交易平台闲鱼,其Web版部分页面采用了Flutter for Web技术重构。...动画和过渡效果 Flutter for Web支持丰富的动画和过渡效果,可以用来增强用户体验。例如,当天气信息加载时,我们可以添加一个加载动画。

    23010

    Flutter基础篇(8)-- Flutter for Web详细介绍

    最近谷歌搞了一件大事情,Flutter也可以写Web应用了,去年我用Dart写了一下Web,请看视频介绍Dart开发前端页面入门系列视频(1),体验了一把Dart写Web的感觉。...Flutter for web目前只是预览版,旨在验证产品是否满足开发人员的需求。目前只支持Chrome浏览器上调试页面。 二、Flutter for Web架构图 ?...Flutter团队重新实现了dart:ui库,用针对DOM和Canvas的代码替换了手机端使用的对Skia引擎的绑定。...在现有移动应用程序内提供动态内容更新的既定方法是使用Web视图控件,其可以动态地加载和显示信息。Flutter支持现在提供统一的Web和移动内容环境,使您可以在线部署内容或嵌入应用程序而无需重写。...6.您可以重新打包现有的Flutter代码以便在Web预览上使用,但在Flutter for Web目前仍处于预览阶段,使用时会有一些警告。

    2.9K10

    基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter

    简单描述就是使用安卓提供的一系列控件来实现页面,复杂点的页面可以通过自定义控件来实现。...结合我做过的项目来说,一般是这个页面需要分享出去的话,就用H5开发。...使用flutter开发 flutter是近年来谷歌推出的一款UI框架,使用dart语言进行开发,支持跨平台,weight渲染直接操作硬件层,体验可媲美原生。...但是flutter技术比较新,生态还不完善,开发起来效率相对偏低。 常规Web开发 Web App软件开发简单地说,就是开发一个网站,然后加入app的壳。...Web App一般非常小,内容都是app内的网页展示,受制于网页技术本身,可实现功能少,而且每次打开,几乎所有的内容都需要重新加载,所以反应速度慢,内容加载过多就容易卡死,用户体验差,而且app内的交互设计等非常有效

    7410

    干货 | 从47%到80%,携程酒店APP流畅度提升实践

    2.2.1 Flutter页面可交互加载时长采集原理 在Flutter中,最终的UI树其实是由一个个独立的Element节点构成。...通过Flutter框架提供的通道技术,Native到Flutter的数据传输通道需要对数据做一次额外的序列化及反序列化的传输,同时传输的过程比较耗时,会阻塞UI的渲染主线程,对页面加载会造成明显的影响...为了缓解 GPU 的压力,Flutter 提供了多层次的缓存快照,这样 Widget 重建时就无需重新绘制静态图像了。...但对整个团队,收获满满,整个实践过程中,我们对flutter工程架构做了整体升级,尤其是数据传输层改造,业务层逻辑收口等;数据的预加载方案,也从1.0版本升级到2.0版本。...目前流畅度2.0的版本也已经落地实践,2.0将更多的不流畅感知因子加入流畅度统计,如主服务的二次加载,地图慢加载、图片及视频慢加载、图片及视频加载失败、弹窗及提示信息等,从更多系统及业务层面来提升用户的预订体验

    1.6K30
    领券