阅读 49

[Flutter翻译]Discreet Log #2: Qwtch to Flwtch: 将Cwtch的Go/Qt前端移植到Go/Flutter上。

原文地址:openprivacy.ca/discreet-lo…

原文作者:

发布时间:2021年3月5日

欢迎来到Discreet Log!这是一个两周一次的技术开发博客,提供我们在Open Privacy工作的研究、项目和工具的深入了解。每两周一次的技术开发博客,深入了解我们在 Open Privacy 工作的研究、项目和工具。在我们的第二篇文章中,Erinn Atwater记录了为Cwtch开发一个新的基于Flutter的用户界面。


Cwtch库提供了一个用Go编写的后端,旨在为我们计划中的一些其他应用提供支持,这些应用使用Cwtch连接作为(元数据最小化、认证的)传输层。Sarah一直在研究Tapir,所以这个后端在Rust中有一个开放的前进路径,但今天我们来这里是要聊一聊另一个方面的问题!

目前,Cwtch alpha用Qt 5编写,并为桌面操作系统和Android编译,是我们的旗舰项目,展示了基本的对等和群组消息传递,以及一些简单的表单演示,称为Lists和Bulletins。我们使用Qt bindings for Go来完成这种搭配。

虽然团队最初对我们使用这个堆栈能如此快速地交出一个概念验证应用印象深刻,但随着时间的推移和空间的发展,小摩擦频繁发生。

2020年,我们曾计划从alpha转入beta版,并对应用进行特殊的 "稳定 "裁剪,以便投放到应用商店,但在推出前的几周,我们发现了许多针对android的arm64构建的崩溃bug,我们无法在其他平台上复制。在进一步的调查中,我们了解到许多bug似乎源于QML堆栈和像DropShadow这样的常见组件的深处,很明显,如果不进行重大的重做,就不可能实现基于Qt的arm64 android应用。

此外,考虑到Qt基金会和他们的开源产品的变化已经让我们的开发人员坐立不安,我们决定在1月份花一周的时间来尝试回答这个问题:用另一个框架中的类似界面来替换我们基于Qt的用户界面会有多少工作量?

在1周的实验中,我们选择了去掉风险的Flutter实现。

为什么选择Flutter?

有些读者会熟悉Open Privacy团队对使用嵌入式浏览器框架编写的应用的普遍反感,比如Electron,因为很难防止它们热衷于加载远程资源所引入的隐私泄露。这就排除了许多现代UI框架。

Cwtch alpha是使用自定义QML编写的,以单一代码库实现跨平台的响应式UI。我们不想放弃这个属性,我们发现Flutter开发频道(很快就是Flutter 2)不仅支持Android和iOS应用,还支持桌面操作系统。

Flutter还具有其他一些我们所欣赏的小奢侈品,比如属性绑定和声明式widget语法。所有的一切结合起来,Flutter在当前的同类产品中脱颖而出,成为Cwtch UI的第二个实现的可行选择。

我们着手去掉几个核心功能:主题、与我们现有的数据模型的集成、可访问性、本地化和移植现有的翻译,此外还有整体的调试和构建体验。

主题和Opaque

在创建Cwtch时,我们将我们的可重用widget和我们的主题系统分离到一个单独的库中,我们命名为Opaque。Open Privacy's Awesome Qt -based User Experience library. 当我们去年突然需要创建Lockbox时,这对我们的工作非常有帮助,因为我们能够快速地制作出一个独立的、跨平台的应用程序,它采用了我们的设计师Marcia为我们精心设计的Open Privacy美学,并与我们现有的翻译系统连接在一起,甚至还加入了一些小细节,如浅色和深色主题。

我们肯定会创建一个类似的库,以便在未来与基于Flutter的应用程序保持这种能力。

然而,这个需求已经不那么迫切了。标准的Flutter抽象,如FlexesExpandedShrinkWrapScrolling viewportsNavigators,减少了大量在QML中制作一个视觉上相同的响应式组件所需的模板。

数据模型和懒加载列表

Flutter承认有很多选择,如何存储/访问/管理你的应用程序的状态,这取决于你的需求和偏好。我们选择了Provider包,它允许我们创建 "ChangeNotified "状态对象,并通过Provider传递给该状态的消费者。

Flutter的ListView还原生支持 "懒惰加载 "的概念,也就是说,只有当用户将一个列表条目滚动到屏幕视图中时,才会访问该条目膨胀所需的数据,而一旦用户滚动离开,就会将其丢弃。这在Qt中同样可以做到,但理解和实现一个与我们的Go绑定兼容的强大的抽象模型所花费的时间是不小的。

本地化

非常感谢我们的志愿者,Open Privacy使用Lokalise翻译我们的软件。在 QML 中,字符串的引用是这样的。

Qt 工具 lupdate 和 lrelease 然后梳理我们的 QML 文件,寻找字符串标识符的变化,并更新 .TS 文件,然后我们将其发送给 Lokalise。对于Flutter来说,flutter_lokalise包能够下载已经存在的翻译,并将其转换为.arb文件,然后由自动生成的LocalizationDelegate类为我们解析。

有一点很好,那就是错误输入的字符串ID现在会被编译器发现。耶!我们现在直接在Lokalise上管理我们的字符串。我们现在直接在Lokalise上管理我们的字符串,简化了我们的管道,从必须在获得翻译之前解析和上传字符串,到简单地下载翻译。它还允许我们创建像 Opaque 这样的模块,提供自己的 LocalizationDelegates,而不是我们不得不用 Qt 来管理笨拙的 .TS 文件。

可访问性

我们在Qt中发现的另一个烦恼是,我们不得不使用高密度的屏幕分辨率API来手动实现所有自定义部件的缩放和字体大小,我们发现这个API在各个平台上都是错误的和不一致的。这在我们的设置窗格中的 "缩放 "控件中得到了体现,它成为我们最常见的错误报告来源之一。

在Flutter中,我们没有这个头痛的问题,也没有这个控件,因为Material widgets已经尊重这些系统设置。)

调试工具比较

我们对Go/Qt绑定的使用也使我们无法使用一些较好的Qt开发工具,如Qt Creator、它的调试器、检查器和qmlscene。

使用FFI/Gomobile与Flutter不会以同样的方式破坏这些工具。

我们能够使用Android Studio来开发 "Flwtch",Flutter和Dart开发工具开箱即用,非常漂亮。

地平线上

现在我们已经熨平了大部分预期的困难,我们正在努力完成这个新的前端,以便我们可以发布它进行新一轮的Alpha测试。由于新的堆栈纠正了我们的应用商店问题,我们也应该能够很快创建Play商店构建,并且可能在不远处创建Windows应用商店构建(祈祷/敲木头/给我们发送你最好的dehexes)。

Flutter应用感觉性能显著提高,这既得益于我们坚持 "Flutterisms "的决心,也得益于我们曾经艰难地做这件事所获得的重大智慧。它的外观和感觉更具有平台原生性,并且符合Android上的Material设计准则,这也是过去人们向我们提出的要求。我们很高兴能把它送到您的手中,为Beta版、稳定版和更远的版本服务。


通过www.DeepL.com/Translator(免费版)翻译

文章分类
前端
文章标签