首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
V2EX  ›  问与答

Flutter 初探

  •  
  •   pjhubs · 102 天前 · 965 次点击
    这是一个创建于 102 天前的主题,其中的信息可能已经有所发展或是发生改变。

    原文地址:PJ 的 iOS 开发日常

    环境配置

    根据 flutter 中文官网上所引导的步骤进行配置,中途可以根据 flutter doctor 命令进行检查相关依赖是否配置完成。

    设备

    • iOS: iPhone 7, iOS 12.1.2
    • Android: meizu 15, Andriod 7.1.1

    遇到的问题

    • 在环境配置中,官方推荐使用 Andriod Studio 进行开发,因为体验是最好的,当然同时也支持 VS CodeIntelliJ。因为开发机“常年”连接公司内网,导致无法在 Andriod Studio 中下载 DartFlutter 插件,尝试 好几次,网上的资料都翻遍了,突然灵光一闪!我特么这是在内网啊!切回外网后,一切顺畅......

    初体验

    Flutter 官方上说的优势之一为“热重载”,新建 flutter 测试项目分别运行在 iOS 和 Andriod 两台测试设备上,iOS 的热重载只要每次 cmd + s 即可,但 Andriod 需要执行两次(非必现),看第一次打印出来的信息提示已经完成 hot reload,但设备上什么都没出现,必须执行第二次 cmd + s 操作后,才能看到真正的 hot reload 的效果。

    左:iPhone 7,右:meizu 15

    flutter 官网上对于“热重载”是这么描述的:

    通过将更新后的源代码文件注入正在运行的 Dart 虚拟机( VM )中来实现热重载。在虚拟机使用新的的字段和函数更新类后,Flutter 框架会自动重新构建 widget 树,以便您快速查看更改的效果。

    所以对于在 meizu 15 上需要执行两次保存操作才能触发“热重载”后的效果展示,我的推测是,在第一次执行保存操作时要么没有把新更新后的代码注入进 Dart 虚拟机中,要么就是注入了但未触发重新自动构建 widget 树。

    渲染

    Flutter 的一大特点,基于 Skia 框架直接进行 UI 的绘制,在 iOS 和 Android 上都脱离了系统 UI 库,先不讨论具体性能如何,但这种做法相当于至少在 UI 渲染这一层 Google 已经在 iOS 和 Android 两个平台上自己都控制了,可能会受限一些系统 API,但也可以做一些原生不支持的事情。

    Flutter 在 iOS 上的视图层级

    差异点

    • 入口的 Main 函数入口使用了 => 语法糖,官方说是“这是 Dart 中单行函数或方法的简写”:
    void main() => runApp(new MyApp());
    
    // 我的推测:上下两者相等,论简洁性,确实是好看一丢丢
    void main() { runApp(new MyApp()) }
    
    • 每一个 Widget 都会有一个 build() 方法,用于描述如何根据其他较低级别的 widget 来显示自己。我的理解就是 initView 方法;

    • Dart 中“万物”(包括布局)都是 Widget,这点就类似与 Objective-C 中的“万物”都是 NSObject

    • Scaffold WidgetMaterial library 中的一个 Widget,提供了 Material 风格的基本组件。

    • Flutter 中并没有类似 iOS 中的 UITableViewCell,直接在 ListView Widget 中构建了 cell,正是因为没有 cell 的概念,所以原本每个 cell 之间的“分割线”也需要手动使用 Divider Widget 进行索引模拟。推荐一篇关于 Scaffold Widget内容介绍

    • Flutter 的 Widget 分为 StatefulWidget (有状态)StatelessWidget (无状态) 两种,这跟在 iOS 中只要是继承了 UIResponder 就具备与用户产生交互进行状态的改变不一样。在 flutter 中如果我们需要实现设计要这个组件是否需要有状态的改变。

    一些简单操作

    • 格式化代码Dart 疯狂嵌套的代码风格已经被吐槽烂了,好在可以在写完代码后,利用 Android Studio 中提供的 Dart 格式化代码工具:选择任何一个 Dart 代码文件,右键选择“ Reformat Code with dartfmt ”,代码格式立马变得好看了许多。

    总结

    经过这次对 Flutter 的初体验,对其惊叹的地方有:

    • 真的做到了一套代码可以“无脑”运行在 iOS 和 Android 两个平台上,使用 Andriod Studio 编写完主体代码后,完全不需要做任何平台差异化设置,直接选择不同平台设备直接运行即可,在加上真的脱离了 JS Core 的“热重载”技术,在 iOS 上的开发体验非常流畅和方便!
    • 在 iOS 上真的抛弃了 UIKit 的所有内容,全都基于 Skia 自己渲染,这点跟 Texture 在 UI 渲染上有异曲同工之处。
    • Dart 这门语言本身有着与 JSX 类似的代码风格痕迹,尤其是对 Widget 做属性的定义时,但从整体上来看因为前身是准备要替代 JS,所以在很多地方也有 JS 痕迹,在一些细节上又透露着 Java 的微小细节,所以从语言本身的上手难度不算大,并没有在语法层面上做出太多的革新。
    • 强烈推荐使用 Android Studio 进行开发!!!
    • 创建 Flutter 工程下的 iOS 平台工程居然主体基于 Swift,这点让我十分意外!

    目前来看不满意的地方只有一个: 在 iOS 上的长列表滑动卡顿十分严重!!!在快速滑动下,估计只有两三帧,而且每一个 ListTitle Widget 上只放了一个 Text Widget 啊!太辣眼睛了......视频在此,对 Flutter 抱有所谓“高性能”的同学可以死心了。

    8 回复  |  直到 2019-02-14 18:54:05 +08:00
        1
    jedrek   101 天前
    未遇到过这样的卡顿, 把代码放出来才有说服力
        2
    pjhubs   101 天前 via Android
    @jedrek 这代码就是 flutterclub 上的事例,请自行移步
        3
    lynan   101 天前   ♥ 1
    调试模式和打包出来的运行效果差别很大的。
    嘤嘤嘤
        4
    wly19960911   101 天前
    debug 模式和 release 的 aot 编译效果不一样的,debug 需要加上很多包,而且你 hotreload 怎么办。
        5
    gitopen   101 天前 via Android
    打包出来就好多了。debug 模式比较卡
        6
    pjhubs   101 天前 via Android
    @gitopen 我说的差异是 Android 和 iOS 在同一环境下的情况
        7
    pjhubs   101 天前 via Android
    @wly19960911 嗯,明白了
        8
    ihainan   68 天前
    我之前也感觉 Flutter 列表的滚动不如 native …一直找不出原因就弃坑了,今天没事又搜了搜,看到近期的一个 issue: https://github.com/flutter/flutter/issues/22314。

    只能说刚起步,坑还是太多。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2723 人在线   最高记录 5043   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 18ms · UTC 13:53 · PVG 21:53 · LAX 06:53 · JFK 09:53
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1