包含flutter知识的词条

flutter 性能知识

ModalRoute中的参数maintainState。其意义为:已经不可见(被上面的盖住完全看不到啦~)的组件,是否还需要保存状态。OverlayEntry类源码中说maintainState设置为true是昂贵的,但是如果maintainState为false,那当不可见时,对应的页面会被销掉,如果pop回去时重新创建的(State 会跑initState方法),那上个页面的状态就无法保持了。这可能也是MaterialPageRoute默认maintainState为true的原因。

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了南部免费建站欢迎大家使用!

这里的saveLayer()是说canvas的saveLayer()方法。一般用于合成特殊效果

可能触发 saveLayer() 并可能代价高昂的其他小部件:

避免调用 saveLayer() :

Flutter开源app---开眼短视频

在玩安卓上有款组件化开源app的项目,一款模仿 Eyepetizer | 开眼视频的 开源app,这款app设计风格特别喜欢的,比较简洁,美观,然后最近又在学flutter的知识,于是就写了一款flutter版本的开源短视频,效果也是听不错的,废话不多说,先上效果图。

先附上项目地址:

项目api会在后面的参考链接里,或者直接项目内查看。

项目地址:

更新:6/30 项目新增下拉刷新,上拉加载功能

kotlin版本开眼短视频开发中,敬请期待...

总结:在此感谢参考的伙伴的文章,写的也很好,然后我将这个项目改写成了flutter,当中也学习到了很多flutter相关的知识,后续还有继续巩固,不断学习。

参考链接(包含本项目的api)

Flutter 上字体的另类玩法:FontFeature

在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中,已经介绍了很多 Flutter 上关于字体有趣的知识点,而本篇讲继续介绍 Flutter 上关于 Text 的一个属性: FontFeature , 事实上相较于 Flutter ,本篇内容可能和前端或者设计关系更密切 。

什么是 FontFeature ? 简单来说就是影响字体形状的一个属性 ,在前端的对应领域里应该是 font-feature-settings ,它有别于 FontFamily ,是用于指定字体内字的形状的一个参数。

我们知道 Flutter 默认在 Android 上使用的是 Roboto 字体,而在 iOS 上使用的是 SF 字体,但是其实 Roboto 字体也是分很多类型的,比如你去查阅手机的 system/fonts 目录,就会发现很多带有 Roboto 字样的字体库存在。

所以 Roboto 之类的字体库是一个很大的字体集,不同的 font-weight 其实对应着不同的 ttf ,例如默认情况下的 Roboto 是不支持 font-weight 为 600 的配置 :

所以如下图所示,如果我们设置了 w400 - w700 的 weight ,可以很明显看到中间的 500 和 600 其实是一样的粗细,所以在 设置 weight 或者设计 UI 时,就需要考虑不同平台上的 weight 是否支持想要的效果 。

回归到 FontFeature 上,那 Roboto 自己默认支持多少种 features 呢? 答案是 26 种,它们的编码如下所示,运行后效果也如下图所示,从日常使用上看,这 26 种 Feature 基本满足开发的大部分需求。

而 iOS 上的 SF pro 默认支持 39 种 Features , 它们的编码如下所示,运行后效果也如下图所示,可以看到 SF pro 支持的 Features 更多。

所以可以看到,并不是所有字体支持的 Features 都是一样的,比如 iOS 上支持 sups 上标显示和 subs 下标显示,但是 Android 上的 Roboto 并不支持,甚至很多第三方字体其实并不支持 Features 。

有趣的是,在 Flutter Web 有一个渲染文本时会变模糊的问题 #58159 ,这个问题目前官方还没有修复,但是你可以通过给 Text 设置任意 FontFeatures 来解决这个问题。

最后,如果对 FontFeature 还感兴趣的朋友,可以通过一下资料深入了解,如果你还有什么关于字体上的问题,欢迎留言讨论。

基于网友的问题再补充一下拓展知识,毕竟这方面内容也不多 。

事实上在 dart 里就可以看到对应 FontWeight 约定俗称用的是字体集里的什么字体:

所以如果对于默认字体有疑问,可以在你的手机字体找找是否有对应的字体, 比如虽然我们说 roboto 没有 600 ,但是如果是 roboto mono 字体集是有 600 的 fontweight ,甚至还有 600 斜体: 。

另外注意这是 Flutter 而不是原生,具体实现调用是在 Engine 的 paragraph_skia.cc 和 paragraph_builder_skia.cc 下对应的 setFontFamilies 相关逻辑,当然默认字体库指定在 typography.dart 下就看到,例如 'Roboto' 、 '.SF UI Display' 、 '.SF UI Text' 、 '.AppleSystemUIFont' 、 'Segoe UI' :

另外如果你在 Mac 的 Web 上使用 Flutter Web,可以看到指定的是 .AppleSystemUIFont ,而对于 .AppleSystemUIFont 它其实不算是一种字体,而是苹果上字体的一种集合别称:

[图片上传失败...(image-40f5ce-1648368234737)]

还有,如果你去看 Flutter 默认自带的 cupertino/context_menu_action.dart ,就可以看到一个有趣的情况:

当然,前面我们说了那么多,主要是针对英文的情况下,而在中文下还是有差异的 ,之前的文章也介绍过:

例如,在苹果上的简体中文其实会是 PingFang SC 字体,对应还有 PingFang TC 和 PingFang HK 的繁体集,而关于这个问题在 Flutter 上之前还出现过比较有意思的 bug :

当然后续的 #16709 修复了这个问题 ,而在以前的文章我也讲过,当时我遇到了 “Flutter 在 iOS 系统上,系统语言是韩文时,在和中文一起出现会导致字体显示异常" 的问题 :

解决方法也很简单,就是给 fontFamilyFallback 配置上 ["PingFang SC" , "Heiti SC"] 就可以了,这是因为韩文在苹果手机上使用的应该是 Apple SD Gothic Neo 这样的超集字体库,【广】这个字符在这个字体集上是不存在的,所以就变成了中文的【广】;

所以可以看到,字体相关是一个平时很少会深入接触的东西,但是一旦涉及多语言和绘制,就很容易碰到问题的领域 。

Flutter 之 可滚动组件 -- 理论知识点(十四)

Flutter 中有两种布局模型:

基于 RenderBox 的盒模型布局。

基于 Sliver ( RenderSliver ) 按需加载列表布局。

通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大;如果要一次性将子组件全部构建出将会非常昂贵!为此,Flutter中提出一个Sliver(中文为“薄片”的意思)概念,Sliver 可以包含一个或多个子组件。Sliver 的主要作用是配合:加载子组件并确定每一个子组件的布局和绘制信息,如果 Sliver 可以包含多个子组件时,通常会实现按需加载模型。

只有当 Sliver 出现在视口中时才会去构建它,这种模型也称为“基于Sliver的列表按需加载模型”。可滚动组件中有很多都支持基于Sliver的按需加载模型,如 ListView 、 GridView ,但是也有不支持该模型的,如 SingleChildScrollView 。

Flutter 中的可滚动主要由三个角色组成: Scrollable 、 Viewport 和 Sliver :

具体布局过程:

比如有一个 ListView,大小撑满屏幕,假设它有 100 个列表项(都是RenderBox)且每个列表项高度相同,结构如图6-1所示:

图中白色区域为设备屏幕,也是 Scrollable 、 Viewport 和 Sliver 所占用的空间,三者所占用的空间重合,父子关系为:Sliver 父组件为 Viewport,Viewport的 父组件为 Scrollable 。注意ListView 中只有一个 Sliver,在 Sliver 中实现了子组件的按需加载。

其中顶部和底部灰色的区域为 cacheExtent,它表示预渲染的高度,需要注意这是在可视区域之外,如果 RenderBox 进入这个区域内,即使它还未显示在屏幕上,也是要先进行构建的,预渲染是为了后面进入 Viewport 的时候更丝滑。cacheExtent 的默认值是 250,在构建可滚动列表时我们可以指定这个值,这个值最终会传给 Viewport。

用于处理滑动手势,确定滑动偏移,滑动偏移变化时构建 Viewport,我们看一下其关键的属性:

在可滚动组件的坐标描述中,通常将滚动方向称为主轴,非滚动方向称为纵轴。由于可滚动组件的默认方向一般都是沿垂直方向,所以默认情况下主轴就是指垂直方向,水平方向同理。

Viewport 比较简单,用于渲染当前视口中需要显示 Sliver。

需要注意的是:

Sliver 主要作用是对子组件进行构建和布局,比如 ListView 的 Sliver 需要实现子组件(列表项)按需加载功能,只有当列表项进入预渲染区域时才会去对它进行构建和布局、渲染。

Sliver 对应的渲染对象类型是 RenderSliver,RenderSliver 和 RenderBox 的相同点是都继承自 RenderObject 类,不同点是在布局的时候约束信息不同。RenderBox 在布局时父组件传递给它的约束信息对应的是 BoxConstraints ,只包含最大宽高的约束;而 RenderSliver 在布局时父组件(列表)传递给它的约束是对应的是 SliverConstraints 。关于 Sliver 的布局协议,我们将在本章最后一节中介绍。

几乎所有的可滚动组件在构造时都能指定 scrollDirection (滑动的主轴)、 reverse (滑动方向是否反向)、 controller 、 physics 、 cacheExtent ,这些属性最终会透传给对应的 Scrollable 和 Viewport,这些属性我们可以认为是可滚动组件的通用属性,后续再介绍具体的可滚动组件时将不再赘述。

可滚动组件都有一个 controller 属性,通过该属性我们可以指定一个 ScrollController 来控制可滚动组件的滚动,比如可以通过ScrollController来同步多个组件的滑动联动。由于 ScrollController 是需要结合可滚动组件一起工作,所以本章中,我们会在介绍完 ListView 后详细介绍 ScrollController。

Scrollbar是一个Material风格的滚动指示器(滚动条),如果要给可滚动组件添加滚动条,只需将Scrollbar作为可滚动组件的任意一个父级组件即可,如:

Scrollbar 和 CupertinoScrollbar 都是通过监听滚动通知来确定滚动条位置的。关于的滚动通知的详细内容我们将在本章最后一节中专门介绍。

CupertinoScrollbar是 iOS 风格的滚动条,如果你使用的是Scrollbar,那么在iOS平台它会自动切换为CupertinoScrollbar

Flutter进阶篇(4)-- Flutter的Future异步详解

本文首发在公众号 Flutter那些事 ,欢迎大家多多关注。

工具安装:

Flutter基础篇:

Flutter进阶篇:

Dart语法基础篇:

Dart语法进阶篇:

说明:本文中的所有函数的引用在 main 函数中:

这里的执行结果是:

Futue直接new就可以了。我这里没有具体的返回数据,所以就用匿名函数代替了, Future future = new Future(() = null); 相当于 FutureNull future = new Future(() = null); 泛型如果为null可以省略不写,为了便于维护和管理,开发中建议加上泛型。

输出结果是:

future里面有几个函数:

then :异步操作逻辑在这里写。

whenComplete :异步完成时的回调。

catchError :捕获异常或者异步出错时的回调。

因为这里面的异步操作过程中没有遇到什么错误,所以catchError回调不会调用。

我们可以看到执行结果是:

我们可以看到输出结果是: 2 1 3 和我们创建Future对象的先后顺序完全一致。

我们可以看到结果为 1 2 3 ,和我们调用then的先后顺序无关。:

当then回调函数里面还有then回调的时候,这时候的流程跟前面就不太一样了,也是一个大坑,也是面试经常会被问到的一个知识点。

我们可以看到执行结果如下:

结果还是一样的:

运行结果是:

这里再次证明了上面我的猜想: 执行顺序和和创建Future的先后顺序有关,如果有多个then嵌套执行,先执行外面的then,然后执行里面的then。

执行结果如下,我们可以看到then内部创建的Future要等到then执行完了,最后再去执行的:

根据上文总结的特点,我们可以不用运行也能推断出输出结果:

为了验证我们的猜想,我们打印一下输出结果,果然我们的证明是正确的。

我们重点看看 then函数的文档说明:

then 注册在 Future 完成时调用的回调。

当这个 Future 用一个 value 完成时,将使用该值调用 onValue 回调。

如果 Future 已经完成,则不会立即调用回调,而是将在稍后的 microtask(微任务) 中调度。

如果回调返回 Future ,那么 then 返回的 future 将与 callback 返回的 future 结果相同。

onError 回调必须接受一个参数或两个参数,后者是[StackTrace]。

如果 onError 接受两个参数,则使用错误和堆栈跟踪时调用它,否则仅使用错误对象时候调用它。

onError 回调必须返回一个可用于完成返回的future的值或future,因此它必须是可赋值给 FutureOr R 的东西。

返回一个新的 Future ,该 Future 是通过调用 onValue (如果这个Future是通过一个value完成的)或' onError (如果这个Future是通过一个error完成的)的结果完成的。

如果调用的回调抛出异常,返回的 future 将使用抛出的错误和错误的堆栈跟踪完成。在 onError 的情况下,如果抛出的异常与 onError 的错误参数“相同(identical)”,则视为重新抛出,并使用原始堆栈跟踪替代

如果回调返回 Future ,则 then 返回的 Future 将以与回调返回的 Future 相同的结果完成。

如果未给出 onError ,并且后续程序走了刚出现了错误,则错误将直接转发给返回的 Future 。

在大多数情况下,单独使用 catchError 更可读,可能使用 test 参数,而不是在单个 then 调用中同时处理 value 和 error 。

请注意,在添加监听器(listener)之前, future 不会延迟报告错误。如果第一个 then 或 catchError 调用在 future 完成后发生 error ,那么 error 将报告为未处理的错误。

【百度地图篇】1.Flutter+百度Sdk实现地图功能 & 百度地图显示网格问题

我是初学者小白,所以很多看法不深,理解也不够透彻。但是很适合小白们一起从低角度往高处探索。文中有错误的,感谢指正,一起进步。

趁着假期做一个Flutter的地图功能,因为后端选用了百度地图,所以前端没得挑。找了遍插件,并没有现成可用的。(不过发现了百度官方也自开发Flutter插件,目前功能只有一个获取本地位置信息,后期会继续增加吧?很期待!)

参考帖子:

这个实际上跟功能之间没太大关系,只是我按照个人摸索的过程来写。

当对一个“领域/知识块”完全不懂的时候,360°的方向都不确定的话。先了解基础概念,有利于你确定自己的摸索方向。

参考帖子:

中间我跳过了几十,上百个帖子的摸索过程。这个才是关键能够真正做事的参考。

因为百度的sdk还算是很完善的,所以一旦出问题,都会有对应的报错提示。

我是使用flutter插件:permission_handler,来解决安卓的动态授权问题,用法简单而且设计合理。

这个错误直接来看,就是签名有问题。怎么查看SHA1码和包名,这里不多说,网上有极其多的方法,百度Sdk开发指南里也有。没那么复杂,也没那么麻烦。按照流程操作就是对的。

实在不放心?跟我一样,flutter打包后,把apk反过来解SHA1码不就行了?

参考帖子:

红色框框基本就是帖子讲解的那样。

蓝色框框见下图:release标签里好像是自己设置了。所以debug标签里面,箭头指向的位置,是我多设置的一个参数。

uid: -1 appid -1 msg: httpsPost failed,IOException:Unable to resolve host "api.map.baidu.com": No address associated with hostname

这一步我是哭笑不得,一开始老是和问题(2)混淆,导致浪费很多时间。仔细阅读后,发现是不能连接到“api.map.baidu.com”。

我打开模拟器的chrome浏览器,发现不能上网。查看手机的dns是10.0.2.3(默认的),和家里wifi不一样,所以不能上网也正常,之前居然没发现这个问题!!!

终端执行:adb shell  和  getprop,就可以查看所有的属性参数了。(window小伙伴自行百度,这个没多大差别。如果你有多个设备,记得自己选好设备。)

在里面找到这一项,就是你的dns参数。有些人是net.dns1,我的是net.eth0.dns1。这个没关系,只是等下指令 稍微改动 就行。

修改dns指令:setprop net.eth0.dns1 192.168.2.1

后面的192.168.2.1是我自己的dns,这个根据自己的情况来填写。不懂的百度下怎么查看自己的dns。

虽然提示设置失败,但是回到模拟器一看,地图已经显示出来了。

嘿嘿,在flutter设定多大的区域,地图就是多大的区域。用起来就很方便了。

过程十分痛苦,因为对flutter不是很熟悉,对Android原生更是了解很少。所以自己就像突然不能讲话,被丢到一个陌生的环境,却要我去找一个人。所以细心很重要,一定要看清楚错误提示,不要错过每一个细节和可能性。

幸好最后解决了问题,开心~

其实如果你仔细阅读过百度官方的文档,会发现里面有关于 地图的生命周期管理 。然后在这里面没有提及到,这一点虽然没提,但不可或缺,小伙伴就自行思考吧。

最后还有一点,其实我的初衷是想实现一个百度地图的plugin,但是苦于能力有限,对Android的不熟悉,最后折戟。我不得已另起项目,然后重新实现地图sdk接入。经过这次对于这些有更多更全面的认知后,有空会再次研究flutter 插件的开发,共勉,奥利给!!!


标题名称:包含flutter知识的词条
浏览路径:http://pwwzsj.com/article/dsehjsp.html