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

美团外卖Flutter动态化实践

第二部分是 DSL 的转换器,产物是 JSON 格式的 DSL,用于标准化的描述页面层级与逻辑。...we disabled dart:mirrors.”那么,在这种前提下,如何将外部符号转内部符号?...图9 运行时 evaluate 触发链路 经过表达式的堆叠,实现了语句,经过语句的堆叠实现了 body,再补充上形参和返回值,则就构成了我们运行时中的自定义方法 FlapFunction。...这也就解释了为什么我们可以处理自定义方法中的逻辑。 ? 图10 Scope的寻找与构建 图 10 描述了 Scope 在实际运用中的两种场景。...在①IDE 开发中②提测阶段③线上监控④降级容灾,我们都有对应的策略。其中②和③的基本是和 Native 类似的 PR 检查、QA、日志、上报之类的这里就不做赘述了,下面主要提一下①和④。

2.5K21

依赖管理(一):图片、字符串文件和字体在Flutter中怎么用?

,还可以在自定义组件时取出主题对应的属性值,实现视觉风格的复用。...而在Flutter中,资源管理则简单得多:资源(assets)可以是任意类型的文件,比如JSON文件或者字体文件等,而不仅仅是图片。...但是在一些特殊情况下,我们可能需要使用自定义字体来提升视觉体验。 在Flutter中,使用自定义字体同样需要在 pubspec.yaml 文件中提前声明。需要注意的是,字体实际上是字符图形的映射。...在将 RobotoCondensed 字体摆放至 assets 目录下的 fonts 子目录后,下面的代码演示了如何将支持斜体与粗体的 RobotoCondensed 字体加入到我们的应用中: fonts...对于字体这种基于字符图形映射的资源文件,Flutter提供了精细的管理机制,可以支持除了正常字体外,还支持粗体、斜体等样式。

2.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    干货 | 携程 Trip.com App 首页动态化探索

    React Native:动态性高,但是学习成本和性能(加载性能、页面性能)不理想; Flutter:谷歌的跨平台框架,性能高,但是无动态性; 通过以上的调研,我们打算用 Native 解析 JSON...{{变量名}},如以上示例:我们的 image 组件中 url 的属性被设置为 product 对象属性中的 imageUrl 的值。...1)自定义:完全自定义一套规则,实现成本高,布局效率取决于实现程度,所以这边是“中”,因为是自定义,所有通用性是三者最差的,几乎独家专属。...以下为 iOS 代码示例: /** 视图节点,映射 FoxPage 中的组件 */ @interfaceFPViewNode : NSObject /** 视图属性 */ @property(nonatomic...1.8、动态更新 动态更新能力是重要的一环,在云端更新了页面布局或者样式之后,App 需要即时拉取到最新的 DSL 模板。以下是流程中的时序图: ?

    2.8K20

    flutter如何解析json

    那flutter如何解析或者说是使用json数据呢? flutter解析json数据,是指使用 dart:convert 库中内置的 JSON 解码器,将 JSON 字符串解析成自定义对象的过程。...但在flutter中需要如下操作,这些操作是使用flutter的基本功所有必须要熟练掌握,有如下步骤: 1、将json数据交个JSON.decode将其转化为一个Map类型的数据。...而字面量对象可以通过点的当时来访问其属性,总之flutter里面Map格式的数据和对象格式的数据是有严格区分的,而js中这一点不是很严格,这点大家要注意。...进阶部分,如果json格式的字符串中的某一个属性的值不是普通值而是对象,格式如下: final String str = '''{ "id":"123", "name":"张三...文章完结了我们来总结下: 首先将json数据序列化,需用用到dart的内置库dart:convert中的json.decode方法 然后定义自定义类,自定义类中实现工厂函数,函数的参数为map数据,内部取出

    4.8K40

    Android开发者的Flutter入门(一)

    如有任何问题或建议,欢迎大家提issue。 本文是Android开发者的Flutter入门的第一部分,有一些技术细节放在了第二部分介绍,戳这里查看 Android开发者的Flutter入门(二)。...你只要申请一个apiKey就能从他家获取json格式的头条新闻数据。至于详情的话需要用webview直接打开对应的新闻url。...JSON解析 网络返回的JSON数据格式如图所示: JSON 这里面"articles"字段的值是个jsonArray,内容是头条新闻的列表。...在Android中我们可以用Gson来把json数据反序列化为对象。那再Flutter中如何来做反序列化呢?...在请求得到返回值response以后就要做json反序列化了。因为反序列化也有可能是个耗时任务,有可能会阻塞ui.

    3.4K10

    Flutter Http网络操作实用教程

    在这篇文章中,将向大家分享Flutter网络操作的一些实用知识和技巧,包括如何用Http库做get请求?、如何用Http库做post请求?、如何将Response转换成Dart object?...,以及如何将请求结果展示在界面上?等。 在大家Flutter开发环境过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助; 目录 如何用Http库做get请求?...它用于表示未来某个时间可能会出现的可用值或错误; http.Response:类包含一个成功的HTTP请求接收到的数据; 在上一节讲解了Future的用法,以及如何从Future中获取服务端具体的返回数据...,如果你对Flutter中的Future还不熟悉的话可以去学习下。...它用于表示未来某个时间可能会出现的可用值或错误; http.Response:类包含一个成功的HTTP请求接收到的数据; 在上一节讲解了Future的用法,以及如何从Future中获取服务端具体的返回数据

    2.2K10

    第131期:flutter中的资源和图片

    指定相应的资源 Flutter使用位于项目根目录的pubspec.yaml文件来识别应用程序所需的资源。 yaml文件是一种类似于json的可读性高,用来表示数据序列化的文件格式。...**/ 资源绑定 Asset bundling flutter应用中的资源必须包含在应用中,同时,每个资源都需要在pubspec.yaml文件中指定相应的路径。资源之间的顺序无关紧要。...在Flutter应用的构建过程中,Flutter会将资源放入一个特殊的归档文件,称为asset bundle,应用程序在运行时从中读取相应的资源。...await rootBundle.loadString('assets/config.json'); } 加载图片 Flutter可以根据当前设备像素比加载分辨率适当的图像。...AssetImage知道如何将逻辑请求的资源映射到与当前设备像素比率最匹配的资源上。为了使此映射正常工作,应根据特定的目录结构排列资产,例如: .../image.png ...

    1.5K20

    NA嵌入Flutter页面

    【一个页面,有一部分是NA,有一部分是Flutter】 如何将Flutter编写的页面嵌入到Activity中 官方提供了两种方式:通过FlutterView和FlutterFragment。...添加页面 在runApp()方法中通过window.defaultRouteName可以获取到在Flutter.createView()方法中传入的路由名称,即"yc_route", 之后编写了一个_widgetForRoute...添加页面 在runApp()方法中通过window.defaultRouteName可以获取到在Flutter.createView()方法中传入的路由名称,即"yc_route", 之后编写了一个_widgetForRoute...04.如何处理NA跳转flutter传参 4.1 NA如何传递参数给Flutter? 如果需要在页面跳转时传递参数呢,如何在Flutter代码中获取到原生代码中的参数呢?...隔开,就像浏览器中的url一样,参数使用了Json格式传递,原因就是方便Flutter端解析,而且对于一些复杂的数据,比如自定义对象,使用Json序列化也很好实现。

    3.7K00

    Flutter 快捷开发 Mac Android Studio 篇

    : 自定义快捷键,选中 Flutter,点击右上角的 + 号,选择 Live Template,然后输入名称和生成的代码,点击 OK。...格式化代码 快捷键:option + command + L(字母 L 键) 清除无用引用 快捷键:control + option + O(字母 O 键) 前进/后退光标的位置 当跟踪代码的时候...将代码提取到方法中 打开 Flutter Outline 标签,点击向右箭头的图标: Flutter 资源网站 官网:https://flutter.dev/ 中文网:https://flutterchina.club...:https://dartpad.dartlang.org/ Dart 官网:https://dart.dev/ CodePen:https://codepen.io/ Json 转实体类:https:...//javiercbk.github.io/json_to_dart/ 最后隆重推荐一下我的博客:http://laomengit.com/flutter/widgets/widgets_structure.html

    1.5K10

    flutter_xupdate 让你一键实现flutter应用版本更新

    自定义更新提示弹窗样式 ---- 集成指南 添加引用依赖 在你的flutter项目中的pubspec.yaml文件中添加flutter_xupdate依赖....格式 { "Code": 0, //0代表请求成功,非0代表失败 "Msg": "", //请求出错的信息 "UpdateStatus": 1, //0代表不更新,1代表有版本更新,不需要强制升级..., retryUrl: "https://www.pgyer.com/flutter_learn"); 自定义Json解析 1.定义一个自定义的版本更新解析器 FlutterXUpdate.setCustomParseHandler...(onUpdateParse: (String json) async { //这里是自定义json解析 return customParseJson(json); }); ///将自定义的...首先你需要确保能否找到下载下来的最新APK,如果你设置了MD5值的话,还需要判断下载下来的最新APK计算出来的MD5值和后台接口返回的MD5值是否一致(计算文件的MD5值Demo中有对应的方法); 其次你需要手动安装一下

    6.3K30

    Flutter-国际化适配终结者

    Flutter i18n官网 安装插件 该神器为idea的一款插件,名为Flutter i18n,大家可以到开发工具的设置中找得到。...image.png 如图,先打开到上面的Plugins这一栏,然后点击插件列表下面的Browe repositories,然后在弹出的界面中输入Flutter i18n。...格式 到这里我们会出现疑惑,.arb是什么格式的文件,下面我们来了解以下.arb格式 ARB文件 arb文件.png ARB文件扩展名为:Application...Resource Bundle 意为应用程序资源包,并得到Google的支持,每个.arb文件都包含一个JSON表,该表从资源ID映射到本地化值,文件名包含已为其转换值的语言环境,你可以选中res/values...File,在弹出的界面中选择你要的语言环境 image.png 如图上: 第一栏为语言 第二栏为特定的区域 为了方便理解我们在Language一栏中拉到底部找到

    2K20

    FlutterWeb性能优化探索与实践

    目前,我们基于 MTFlutterWeb 完成提效的业务超过了 9 个,在 App 中,能够基于 FlutterNative 提供高性能的服务;在 PC 端和 Mobile 浏览器中,利用 FlutterWeb...针对文件 Hash 化和 CDN 加载的支持,我们在 flutter_tools 编译流程中对静态资源进行二次处理:遍历静态资源产物,增加文件 Hash (文件内容 MD5 值),并更新资源的引用;同时通过定制...这样看似解决了业务代码与 SDK 耦合的问题,但在实际操作过程中,我们发现每次业务代码的变动,仍然会导致编译后的 main.dart.js 随之发生变化(文件 Hash 值变化)。...同时,将 Runtime Manifest (分片文件的加载逻辑和映射关系)注入到 HTML 文件中,这样保证了业务代码的变动不会影响到公共包。...下图为运行阶段的详细方案设计: 图18 预缓存运行阶段 在监听阶段,我们可以获取到页面的首屏渲染完成的时机,会获取到云端 JSON,首先判断该项目的缓存是否为启用状态。

    1.8K20

    化繁为简:Flutter组件依赖可视化

    5.2.1 依赖格式统一 要相对依赖做合并,就需要一个更大的数据结构来承载主工程和所有组件的依赖。这里作者引入一个新的自定义类 VizPackage。...由于直接获取到的组件依赖的数据结构是一个字符串类型,要先对字符串做解析,才能获取到其中的有用信息,所以这里需要再引入一个自定义数据结构 DepsList。...由于 DepsList 中的 sections 存储了所有组件的依赖关系,下面展示一下如何将单个 section 转换为 VizPackage。全部转换只需遍历调用即可。.../// 将DepsList中,sections中单个元素的格式转换为 VizPackage VizPackage addPkg(VersionedEntry key, Map<String, VersionConstraint...6 化繁为简 按照上面的流程,我们可以获取到Flutter工程的完整依赖关系图。

    84910

    Flutter TolyUI 框架#05 | 树形菜单设计

    本文将探讨 TolyUI 在树形导航菜单中的设计。 1. 树形菜单设计动机 树形菜单是 Flutter 本身不支持的,但在桌面端或 Web 端中是非常常见。...其中条目提供了 TolyUI 的默认样式,并且也提供了菜单项的自定义构建途径。 TolyUI 模块化设计中,树形菜单对应的组件是 TolyRailMenuTree。...另外,通过自定义映射关系和解析函数,可以极大方便开发者对树形结构数据的维护。树形结构的映射关系,也可以通过网络请求 json 数据解码获得,这样就可以动态化配置菜单树。 3....映射数据拓与展元数据解析 前面说过,树形结构是由 映射数据 决定的,所以拓展数据也需要加入到映射数据中。...如下所示,在菜单项的映射数据中,可以放入对应的拓展项:完整数据可见 plcki_menu_tree_data_plus.dart 有了数据之后,接下来的问题就是:如何将映射数据中的拓展字段,解析到 MenuMeta

    32910

    【JavaSE专栏88】Java字符串和JSON对象的转换,转来转去就是这么玩!

    二、在 Java 中,有哪些常用的 JSON 处理库? 常用的 JSON 处理库有 Jackson、Gson、Fastjson 等。 三、如何将 Java 对象转换为 JSON 字符串?...四、如何将 JSON 字符串转换为Java对象?...JSON 对象可以是嵌套的,可以通过递归的方式解析嵌套的 JSON 对象,或者使用对象映射的方式将嵌套的 JSON 对象映射为 Java 对象。 七、JSON 中的数据类型有哪些?...JSON中的数据类型包括 字符串(String)、数字(Number)、布尔值(Boolean)、数组(Array)、对象(Object) 和 null。...可以使用 null 值来表示 JSON 中的空字段,或者根据具体需求使用默认值或空字符串来表示。

    44560

    Flutter Platform Channels(一)

    JSONMessageCodec 是用来处理'Json-like'数据(字符串,数字,布尔值,null,元素为此类值的list以及键为字符串值为此类值的Map)进。List和Map是异构的,可以嵌套。...在编码期间,这些值会被转换为JSON字符串,然后使用UTF-8转换为字节。...数据会被编码成二进制格式,编码具有可自定义,合理而紧凑以及可扩展的特征。在flutter中,通道通信默认选用的是标准解码器(StandardMessageCodec)。...就JSON而言,使用StandardMessageCodec的message channels 在Dart中的类型是BasicMessageChannel 。...Flutter仅将编解码器用于应用内部通信,而不是持久性格式。 这意味着消息的二进制形式可能会从一个Flutter版本更改为下一个版本,而不会发出警告。

    4.4K01

    Flutter 音视频播放器的实现思路及设计理念

    请大家思考这样一个业务场景:   比如我们想调用摄像头 来拍照或录视频,但在拍照和录视频的过程中我们需要将预览画面显示到我们的Flutter UI中,如果我们要用Flutter定义的消息通道机制来实现这个功能...简单的介绍一下:Texture可以理解为GPU内保存将要绘制的图像数据的一个对象,Flutter engine会将Texture的数据在内存中直接进行映射(而无需在原生和Flutter之间再进行数据传递...通俗来说,我们在上面已经获取到了CVPixelBufferRef类的数据,那我们如何将Native层的数据传输到Dart层呢?这就是我们插件要实现的部分。这部分直接贴出核心部分的代码吧。...其实是为了我们的多窗口播放功能,也就是在插件的example展示的一个界面中多个播放画面的效果,其实这一类的设计还可以应用在视频通话实现中的多窗口会话 ,说白了就是可以在Flutter中对应多个不同的...再来回忆一下整个流程:iOS用CVPixelBufferRef将渲染出来的数据存在内存中,Flutter engine会将Texture的数据在内存中直接进行映射无需通过Channel传输,然后Texture

    3.3K40
    领券