首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【腾讯云Cloud Studio实战训练营】使用Cloud Studio&Flutter完成跨平台博客的搭建

    我们可以通过终端来进行这些操作,点击菜单栏--终端--新终端,会在底部打开一个面板,点击【终端】切换到终端。...运行 单击对应的工作空间卡片,就会在新的页面打开并运行该空间,此时该工作空间卡片上会显示“运行中”状态。 ? ?...5.3Gitee上新建一个仓库 ? 在我们的云IDE的工作空间里,打开终端。...在flutter里面是不能直接访问的,一定要放到容器里面去才能访问,如:tomcat等 坑2: 已经用nginx代理,用浏览器打开还是一片空白 那是因为文件路径引用不对.解决办法有2种 方法1:...(2)右侧布局窗口中会自动打开新标签页,可以选择您心仪的图标和标签,以及填写您模板的描述 ? 点击完成 ?

    1.8K60

    第132期:flutter的导航和路由

    导航和路由 Flutter提供了一个完整的用于在屏幕之间导航和处理深层链接的系统。...命名路由的局限 尽管命名路由可以处理深层链接,但是他们的表现总是一致的,没办法做到自定义。当应用平台接收到一个新的深层链接,不论用户此时在哪个位置,Flutter都会将新的路线推送到导航器上。...深度链接 Deep linking Flutter支持iOS、Android和web浏览器上的深度链接。打开URL会在应用程序中显示该屏幕。...在 Android 上启用 深度链接 Deep linking 只需要在AndroidManifest.xml配置文件中的标签中添加一个元数据标签和意向过滤器标签即可: flutter_web_plugins插件库导入usePathUrlStrategy方法,在入口函数中调用即可。

    3.1K30

    Flutter for OpenHarmony 简单的应用开发详解:从代码到页面的完整构建流程

    Flutter for OpenHarmony 简单的应用开发详解:从代码到页面的完整构建流程 本文将分步骤详细讲解一个简单 Web 页面的由来与实现过程。...创建并打开项目 oh.demo02(这篇文章有解释怎么创建项目) 当前打开的项目名为 oh.demo02,这是一个标准的 Flutter 项目。...) title:控制浏览器标签页标题。...第四步:浏览器预览 —— 最终页面呈现 点击run即可出现预览图 URL 地址 localhost:58393 这是 Flutter 在本地启动的 Web 服务器地址。...如果你正在学习 Flutter,不妨动手复制这段代码,在自己的环境中运行一次,亲身体验“所见即所得”的开发魅力!

    15210

    Android开发者的Flutter入门(二)

    AndroidManifest.xml 在第一个红框中,给MainActivity设置了一个Theme; 另外注意一下第二个红框中的meta-data标签。...那段注释的大概意思是说这个标签是用来表示让Flutter在启动过程中保持闪屏页直到第一帧画面被绘制出来。也就是说,闪屏页的隐藏不需要我们来处理了。 接下来看看这个LaunchTheme: ?...下拉刷新 上拉加载更多 Flutter没有系统提供的加载更过控件,这里我们想办法做一个比较粗糙的实现。思路是在列表的末尾添加一个加载控件,当滑动到列表底部的时候触发加载的操作。...路由(页面跳转) Android中我们都是用startActivity或者第三方路由库来做页面跳转,在Flutter中,使用内置的Navigator来做跳转的。...Navigator是一个栈,当需要打开新页面的时候就调用Navigator.push,需要返回的时候就调用Navigator.pop,本文中的app当点击新闻项的时候要跳转另外一个页面打开新闻详情。

    1.9K20

    IM跨平台技术学习(十三):从理论到实践,详细对比Electron和Tauri的优劣

    NW.js(node-webkit )是一个基于 Chromium 和 Node.js 的 Web 运行环境,可直接在 DOM 中调用 Node.js 模块,并可使用任何现有的 Web 技术来编写本地应用...,当页面需要请求资源时,通过 ResourceDispather 创建一个请求 ID 转发到 IPC,在 Browser 进程中处理后返回。...除了显示网页内容的主要能力之外,它还有许多次要的职责,例如:管理众多窗口 ( 或标签页) 和加载第三方扩展。在早期,浏览器通常使用单个进程来处理这些功能。...这种模式虽然能减小打开每个标签页的开销,但也同时意味着一个网站的崩溃或无响应会影响到整个浏览器。...为了解决这个问题,Chrome 团队决定让每个标签页在自己的进程中渲染, 从而限制一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害,然后用单个浏览器进程控制这些标签页进程,以及整个应用程序的生命周期

    1.8K10

    Flutter Web - 优雅的兼容 Flutter App 代码

    前言 算最近工作里产出的干货,记录下心得。 与上文一脉相承,上文展示了如何使用 Flutter UI 绘制 Web 页面的架构形态。...复用 App 的 Flutter UI 其实还没办法完全达到目的,最好的方式是整个 App 的 Flutter UI + 业务 Core 都能无缝迁移到 Web 上。...顺便放一下在 Typescript 中是如何定义的。...路由挂载页面 在 App 中还是用的闲鱼的 flutter_boost (上山容易下山难),所以并没有办法能直接用在 Web 项目中。 在 Web 项目中是用的正统官方推荐的 go_router。...这一部分也不能在 App 项目变更,那我们能做的就是把 RouterPlugin 接出来,做一个统一处理。当然,也就是路由桥接适配在 Web 中的实现。

    2.3K20

    解读 Flutter 全平台开发的误解与偏见

    image 1.1、 Web 但是 Flutter 在 Web 上却并非完全如前面所述那样,因为 Web 下的浏览器 JS/CSS/HTML 霸权是不可撼动的,所以 Flutter 一开始在 Web 上会通过...HtmlCanvas 来转化为浏览器的原生标签。...这就表示 Flutter 需要和 “Web 原生有不同程度的耦合关系”,从而造成了代码在不同平台的表现形式和 API 的兼容能力都会有所不同,而 Flutter 应对 Web 的这种情况,使用了大量的自定义标签...: Flutter 开发者恰好写了一个 App 或者 Desktop 的页面,那么顺手把它打包成 Web 用起来,虽然体验不好但是又不是不能用的场景。...** 那么有没有办法让界面同时适配 PC 和 Mobile 呢?还真有,比如 ResponsiveFramework 就是用于实现这种需求的,当然这种实现需要消耗性能和时间成本。 ?

    1.7K20

    【Flutter】362- 让前端开发者失业的技术,Flutter Web 初体验

    7、运行 flutter doctor 打开一个新的命令提示符或 PowerShell 窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装: flutter doctor 这是一个漫长的过程,flutter...dev 的依赖页非常少,两个编译相关的包,和一个静态文件分析包。...第一步:更改主应用内容,打开 lib/main.dart 文件,替换 class MyApp,首先是根组件 MyApp,它是一个类组件继承自无状态组件,是项目的主题配置,在 home 属性中调用了 Home...), home: Home(), // 启动首页 ); } } 第二步,在 Home 类中,是我们要渲染的页面顶导,运用了 AppBar 组件,它包括了一个居中的页面标题和居右的搜索按钮...总结 FLutter web 是 Flutter 的一个分支,在开发完 App 之后,UI 层面的 FLutter 代码在不修改的情况下可以直接编译为 Web 版,基本可以做到代码 100% 复用,体验还不错

    2.8K20

    昨晚简记+Flutter桌面、Web开发

    也演示了手柄、游戏的控制,巴拉巴拉... 我最喜欢的是gskinner 的炫酷交互页面,而且开源。 可访问:https://flutter.gskinner.com/ [8]....很多人提问"章口就莱",提问的正确打开方式,你需要给出: 1.应用场景:说明你不是在拿我寻开心 2.你对问题的了解:哪出现了问题,先别问别人,先问自己,说明你做了这点 3.脱敏后的小demo:写个小...微信:zdl1994328 前言 想要开发桌面和web,首先将分支切到master,开启支持。 如果你有洁癖,只是想体验一下,完全可以新下一个SDK,共存也是没问题的。...你会发现和原来的项目相比多了两个包,web包以及,我的是macOS 1.2 运行项目 在设备栏可以看到支持的设备 可以直接运行项目:macOS效果 可以直接运行项目:web效果 2.../iOS端做的基于bloc状态管理的github搜索页,直接拷贝进去。

    1.5K40

    干货 | 携程酒店Flutter性能优化实践

    在开发过程中,也遇到了一些性能相关问题和用户反馈,比如长列表滚动卡顿、页面打开时间较长、页面打开后部分数据加载时间较长等问题。...如果一次性全部构建了列表,滑动过程中不会触发新的构建,滑动流畅度体验更好,但是第一次构建时的卡顿感明显。...对客户端应用来说,页面之间跳转是相对确定的,数据在页面之间存在共享的可能,预加载的工作是在打开页面之间预先获得页面的数据,从而减少打开页面到页面展示的时间。...预加载数据有三种常见方法,第二个页面的数据在第一个页面的服务结果中获得;第二个页面的数据在客户端其它页面中预先获得并缓存;第二个页面的服务请求在打开页面之前发送。...图24 酒店详情的内存泄漏监控 4.2 内存泄漏的治理 下面介绍一下,我们在我们页面的内存泄漏治理中发现的一些导致泄漏的原因和解决的办法。

    2.6K10

    干货 | 携程火车票Flutter最佳实践

    RN 能够满足我们绝大部分的业务,并且热更、版本控制都很灵活。但是在复杂页面上,特别是在长列表的渲染上,还是存在一定的问题,促使我们去尝试一些新的解决方案。...三、Flutter 性能调优 一个新技术改造完成,我们最关注的当然是性能体验有没有达到预期。那Flutter页面性能评判标准是什么,如何去度量,有没有可视化工具,帮我们去做一些性能调优。...针对这种情况我们对将要加载的图片进行预加载处理,比如列表页在分页请求数据回来的时候做图片预加载。还有,下一个页面的图片,需要一进去就有图片直接显示,就可以在当前页面做图片预加载。 ?...4.2 Flutter 数据预加载 为了缩短用户的加载等待时长,我们经常需要一些预加载方法。比如在前一个页面预加载下一个页面的数据,或者在长列表的分页请求时候,可以做分页预加载。...比如当你滑动到第五个可见的时候,就提前把下一页的数据加载好。 列表页通过桥方法获取上一个页面预加载的数据,这样就能有一个直出体验,这里要考虑数据已经加载好、加载中、加载失败的情况。

    3K30

    再谈路由与导航,详谈Flutter是如何实现页面切换的

    比如,在iOS中,我们通常或初始化一个ViewController,通过pushViewController来打开一个新的页面;而在 React 中,我们使用navigation 来管理所有页面,只要知道页面的名称...需要提前注册页面标识符,在页面切换时通过标识符直接打开新的路由。 接下来,我们先一起来看看基本路由这种管理方式吧。...基本路由 在Flutter中,基本路由的使用方法和iOS/Android打开新页面的方式非常类似。...而在应用中页面比较多的情况下,再使用基本路由方式,那么每次跳转到一个新的页面,我们都要手动创建 MaterialPageRoute 实例,初始化页面,然后调用push方法打开它,还是比较麻烦的。...下面的代码演示了如何获取参数:在 SecondPage 页面关闭时,传递了一个字符串参数,随后在上一页监听函数中,我们取出了这个参数,并将它展示了出来。

    3.4K20

    Flutter 零基础入门(四十):TabBar 与底部导航栏 —— 多页面切换与布局技巧

    提示 StatefulWidget 与 setState 控制动态 UI 接下来,我们进入 多页面 App 架构: TabBar → 顶部标签页 BottomNavigationBar → 底部导航...→ 图标 + 文本 2️⃣ 状态保持 在 BottomNavigationBar 多页面切换中,如果每个页面都是 StatefulWidget,默认会被重新创建。...解决办法:用 IndexedStack 保持页面状态: body: IndexedStack( index: _currentIndex, children: _pages, ), 切换页面不会重建...你已经学会: TabBar 顶部标签页 BottomNavigationBar 底部导航 多页面切换与状态保持 TabBar + BottomNavigationBar 组合 构建多模块 App 框架...到这里为止: 你的 Flutter App 已经具备完整的多页面框架能力 ✅ 七、一句话总结 TabBar 顶部切分类 BottomNavigationBar 底部切模块 IndexedStack 保持页面状态

    17510

    移动端跨平台技术之下的变与不变

    目前来看,移动端跨平台需求主要集中在: 跨 PC 端与移动端:PC 向无线过渡的早期,希望 PC Web 与移动 Web 复用同一套代码 跨 Native 与 Web:商品详情页等要求有一套功能差不多的...Web 页能够在端外访问,需要跨 Native App 与 Web 跨 Native 双端:出于开发效率等原因,希望 Android、iOS 双端复用一套业务代码 跨 App:一些产品功能期望能在多个渠道投放上线...除 Web 天然跨端之外,另一种统一多端的思路是将 Native 定制成标准容器,让同一份代码跑在一个个标准容器中,例如: Android 容器:Native 壳 App iOS 容器:Native...而 Flutter 方案更彻底一些,连渲染层也换成了基于图形引擎自绘 UI 控件,从而保证 UI 交互的跨端一致性 然而,由于容器化 Native 的方案是从 Native 出发,没有跨端天赋,除了要想办法支持...那么,有没有办法把这些不应该跟着变的部分固定下来?

    1.4K21

    Flutter Web:刷新与后退问题

    前言 使用flutter开发web页面,在pc端使用就会面临刷新的问题。尤其是刷新时,本地变量清空导致页面问题,所以就需要考虑全局缓存的问题。...但是这里有一个问题,点击返回按钮后,虽然拦截了不会回退到上一页面,但是地址栏中的url变成了首页的url,但是页面还是当前页面,而且点击三次后确实返回了上一页,但是刷新就出问题了。...(这里其实有一个不完善的解决方案,就是在setNewRoutePath时,将新的url与_stack中的对比,如果有说明是回退操作,将_stack中它前面的都移除。...但是这要求我们的每个页面在栈中时唯一的,无法同时出现两个相同的页面,如果应用相对简单其实是可以考虑这种方案的) 总结 所以总结就是,目前flutter web对于浏览器还是没有适配完全,无论Navigator1.0...目前来看google的对flutter web的意图,还是开发移动web并在App中通过webkit这种内核使用,并没有想开发者使用flutter web来开发真正的web应用,或者后续会完善这部分。

    3.3K30

    浅谈Hybrid

    React Native所有的标签都不是真实控件,JS 代码中所写控件的作用,类似 Map 中的 key 值。...和 react native 一样,weex 所有的标签也都不是真实控件,JS 代码中所生成的 dom,最终都是由 Native 端解析,再得到对应的 Native 控件渲染,如 Android 中 标签对应...本质其实是在原生的 App 中,使用 WebView 作为容器直接承载 Web 页面。因此,最核心的点就是 Native 端 与 H5 端 之间的双向通讯层,也就是我们常说的 JSBridge。 ?...上面这三种方式都可以被称为是JS上下文注入,他们都有一个共同的特点就是,不通过任何拦截的办法,而是直接将一个 native 对象(or 函数)注入到 JS 里面,可以由 Web 的 JS 代码直接调用,...但这几种方法在实际的使用中有利有弊,但由于prompt是几个里面唯一可以自定义返回值,可以做同步交互的,所以在目前的使用中,prompt是使用的最多的。

    7.7K30
    领券