flutter怎么玩,flutter经验

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 这样的超集字体库，【广】这个字符在这个字体集上是不存在的，所以就变成了中文的【广】；

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

相关问答

Q1: flutter直播怎么实现？

flutter作为一个相对来说比较新兴的框架，相比于其他框架来说避免不了存在生态不完善的问题。要想实现flutter直播，可以接入即构科技的Express Flutter SDK，然后通过集成、初始化SDK、登录房间服务器、用户推送自己的本地音视频、拉取远端的音视频流等简单五个步骤实现简单的实时音视频场景进行直播。

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

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

先附上项目地址：

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

项目地址：

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

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

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

参考链接（包含本项目的api）

Q3: Flutter iOS 苹果IAP(内购)实现步骤及问题总结(全网最全)

点击 “协议、税务和银行业务”

内购用的是付费应用程序，先签署《付费应用程序协议》，同意后状态变更为“用户信息待处理”，等待审核。

状态更改完毕后，点击“开始设置税务、银行业务和联系信息”。

（1）添加银行账户,按照要求填写相关内容即可。

（2）选择报税表，并填写。所有与 Apple 有商业合作者必选都是美国，若有其他需求，可以多选。

继续填写，首先认证公司基本信息，选择所有人类型，确认无误后认证条款处打对勾

Part I 部分，继续核对公司相关信息，选填内容可不填。

Part III 部分，签署税务条约，设置利益限制条款的种类，选填内容可不填。此部分如果需要可勾选上下图勾选框，不需要可不勾选，我们这个项目没有用到part III 部分,所以没有勾选。

Part XXX 部分，确认之前填写的信息，勾选完毕后，提交

（3）填写联系信息，共5个。高级管理、财务、技术、法务、营销。只需要提供5个人的基本信息即可。

只可使用一次的产品，使用之后即失效，必须再次购买。

示例： 钓鱼 App 中的鱼食。

只需购买一次，不会过期或随着使用而减少的产品。

示例： 游戏 App 的赛道。

允许用户在固定时间段内购买动态内容的产品。除非用户选择取消，否则此类订阅会自动续期。

示例： 每月订阅提供流媒体服务的 App。

允许用户购买有时限性服务的产品。此 App 内购买项目的内容可以是静态的。此类订阅不会自动续期。

示例： 为期一年的已归档文章目录订阅。

App 内购买项目的截屏，即所售项目的示意图。例如，如果 App 内购买项目是一本图书，您可以提交图书的截屏。您也可以提交购买页的截屏。该截屏仅用于 Apple 审核，不会在 App Store 中显示。

截屏要求如下：

iOS 至少需要 640 x 920 像素

Apple tvOS 需要 1920 x 1080 像素

macOS 需要 1280 x 800 像素

App 审核图像上传后，可以替换，但无法移除。当您的 App 内购买项目处于审核中时，您无法更新截屏。

沙箱账号是不能直接在App Store进行登录的，只能在点击了购买商品之后，在弹出的登录框进行登录 。

验证是否已登录沙箱测试账号：

设置--iTunes Store与App Store，页面拉到最底部，会看到沙箱账户项会列出你已登录的沙箱测试账号！

操作方法一：打开App Store应用首页滑到最下方--选中AppleID--注销

操作方法二：设置--iTunes Store与App Store--选中AppleID--注销

checks if the client can make payments(检测App是否能支付)

getAvailablePurchases

Get all non-consumed purchases 获取未消费的商品

打印信息查询；

原因：

没有先执行getProducts，直接执行requestPurchase方法,要先拉取商品列表，再执行购买操作.

问题描述；

1.漏单必须要处理，玩家花RMB购买的东西却丢失了，是绝对不能容忍的。所谓的漏单就是玩家已经正常付费，却没有拿到该拿的道具。

解决：只要购买成功，便将购买记录(receipt等账单信息)保存下来，然后将账单信息传送给我们游戏服务器，游戏服务器获得账单后，和苹果服务器验证，账单有效的话，回馈给游戏服务器处理，游戏服务器处理后，返回给游戏客户端处理，处理完毕，将本地保存的购买记录删除。

官方文档：向苹果校验支付凭证

21000 App Store无法读取你提供的JSON数据

21002 收据数据不符合格式

21003 收据无法被验证

21004 你提供的共享密钥和账户的共享密钥不一致

21005 收据服务器当前不可用

21006 收据是有效的，但订阅服务已经过期。当收到这个信息时，解码后的收据信息也包含在返回内容中

21007 收据信息是测试用（sandbox），但却被发送到产品环境中验证 【请求sandbox校验支付凭证】

21008 收据信息是产品环境中使用，但却被发送到测试环境中验证

消耗类型： 例如：金币、道具等。

非续订订阅： non-renewable subscription 例如：VIP

您的首个 App 内购买项目必须以新的 App 版本提交。请创建您的 App 内购买项目，然后前往 App 的“App Store”页，从“App 内购买项目”中进行选择，点按“提交”。 了解更多

在上传二进制文件并提交首个 App 内购买项目以供审核后，您可以使用下表提交其他 App 内购买项目。

唐巧-iOS应用内付费(IAP)开发步骤列表

未完~待续

当使用内购购买过商品之后没有把这个交易关闭，所以再次去购买商品后就会调用以前已经购买成功的交易去购买因为已经购买过，才会有这个提示

原因：添加内购项目时，信息填写不完整，app审核图像未上传

处理方法：上传app审核图片( 合适的尺寸 )，点击提交，状态改为正在准备审核中。

这个是内购选择类型不匹配原因导致。

购买成功之后，Apple会返回以下四个数据给应用

Reference

Review the updated Paid Applications Schedule.

游客身份解决方案：即不登录也要能购买

1）服务器端做一个苹果审核机制，审核期间游客身份可以进行一切行为，一旦审核通过，修改服务端即可达到强制用户登录进行内购买的目的（这个有点。。。）

2）游客可以进行内购买，购买时以设备UUID为准，生成一个游客账号，将购买信息保存在服务器和本地，当用户登录正式账户后判断此设备是否进行过内购，有的话提示用户将游客身份购买的权益与现有账号绑定，如果绑定，游客权益则迁移到正式账户，如果不迁移，则游客身份和正是账户是两个独立账户，正式账户不享有游客身份的权益（我用的这个）

内购游客模式解决方案

iOS内购规则

Q4: flutter怎么样

flutter很强，目前一套代码可以供Android，iOS， Web 使用，妥妥的一套代码，多端使用，在跨平台开发中，有着巨大的影响。

Q5: Flutter视频播放器，简洁！

注：亮度调节和音量调节gif无法体现，功能是ok的，其次默认Icon锁的close和open实在难以分辨。

环境：Flutter 2.8.1 channel stable ;Dart 2.15.1

需要音频播放器的看这里： Flutter音乐播放器

重点说下这个工具类，因为视频播放，涉及到状态改变有很多，笔者刚开始选择使用 InheritedWidget 来在众多的widget之间共享数据。但是总感觉这样有点繁琐，且不很优雅！

这里非广告，如果是使用 GetX 就很简单了，笔者也使用了 GetX 进行封装了，一泻千里的赶脚！，但是笔者还是那句话：刚开始接触Flutter的开发者不是很建议使用 GetX ，可以先熟悉下Flutter状态管理的基础原理再行使用。而且为了尽量简洁，还是不引入其他的第三方了。

我们选择对第三方插件进行封装的目的不外乎这几个：

于是笔者就写了一个工具类 VideoPlayerUtils ，专门且只用来处理播放器的所有业务。包括暂停、播放、跳转、调节音量、调节亮度、切换视频等操作。在所有的widget中不会引用关于 video_player 或其他第三方插件的任何信息， VideoPlayerUtils 负责widget与播放器之间的所有操作交互。后续优化迭代或更换播放器插件时，只需针对这个工具类进行修改，对所有widget不会有任何的影响，大大的解耦合了。

其中 VideoPlayerState ：

提供以上的公共属性，可以通过 VideoPlayerUtils 来获取对应的值，使用 get 只读，使外界不会误修改这些属性，以保证数值的安全性。开发者可根据自身需要自行添加属性。

提供以上方法来处理播放器的所有业务。同样的开发者可根据自身需要自行添加或修改。

重点说下这个方法，是整个业务的核心方法，控制视频的播放或暂停。开发者只要遇到播放或暂停是均可调用此方法，具体是播放或暂停，内部根据传入的 url 自行判断，开发者不需要关心。

切换新视频也是使用此方法，传入的 url 与上次不一致，自动切换新视频。笔者可根据 statusListener 来监听播放状态的改变，以此处理自身逻辑。

这个也需要提下，视频播放器在播放新视频时会异步初始化，一般我们的操作是在 initState() 初始化，成功后再 setState() 。这里笔者遇到一个让人蛋疼的问题：

我们看 video_player 的使用：

VideoPlayer(controller) ：widget中已经持有了controller。本来笔者封装的目的就是为了让widget与controller的之间解耦合。但此时的笔者。。。。

放弃不是不可能放弃的，这辈子都不会放弃的！

于是笔者取了巧，写了一个初始化监听器 initializedListener ，包换2个参数： bool,Widget ，初始化是否成功；其中widget为初始化成功返回需要展示的播放器UI，失败默认返回 const SizedBox() 。

到这里就可以简单使用了：

没看错，视频播放就是这么简单。

如果有更多的业务功能，笔者也按照自己的需求写了一套，同样的开发者可根据自身需要自行添加或修改。

VideoPlayerGestures 主要是处理手势的，比如快进、快退等跳转播放；左侧上下滑动调节亮度；右侧上下滑动调节音量；单击是否开启沉浸式播放，所有widget的隐藏与显示；双击播放、暂停等。

哦，还有 PercentageWidget 也放到这个文件下了，就是这玩意：

因为显示的百分比与手势相关，随着手势移动而更新。开发者可自行处理。

笔者处出于简单考虑，就按照整个UI的位置命名了。瞅一眼就知道是啥玩意。

同样的开发者可根据自身需要自行添加或修改。

就是这玩意：

同样的开发者可根据自身需要自行添加或修改。话说这个锁的 Icon 的open和close是真的难分辨！

就是这玩意：

同样的开发者可根据自身需要自行添加或修改。

这玩意是自定义的，别问，问就是跟产品干一架落了下风

主要就是自定义这玩意：

同样的开发者可根据自身需要自定义。

注：这里没有添加缓冲的进度，开发可查看 video_player 中的源码 VideoProgressIndicator ，按业务自行定义。

这玩意就是整合以上的widget，再考虑下全屏的安全区域，没啥东西。开发者可自行处理！

具体的实现监听器的思路， 看这里 。

自此一个漂亮的Flutter视频播放器就已经结束了。如果您觉得对您有些许帮助的话，欢迎 Star ！