3.1、Flutter:iOSer

零、项目结构、资源、国际化等

1、资源

  • Flutter项目的资源放在iOS的Images.xcasset
    Resources that are placed in the Images.xcasset folder on iOS, are placed in an assets folder for Flutter.

  • Flutter中的资源文件需要在pubspec.yaml声明才能用。 —— 这点很繁琐

  • Flutter多分辨率的支持

// 资源文件下按目录放置
images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

// yaml文件中声明,然后自动匹配
assets:
 - images/my_icon.png

2、国际化

  • Flutter默认不支持国际化(iOS通过Localizable.strings文件支持。)
  • Flutter通过flutter_localizationsintl 包 支持国际化。

3、依赖包管理

iOS使用Cocoapod,Flutter使用pubspec.yaml进行管理。

一、View

1、UIView --> Widget

  • iOS中的UIView,可以等价于Flutter的Widget。

  • Widget 是不可变的;不管是widgets或者它们状态的改变,Flutter框架都会创建新的widget-tree。
    Whenever widgets or their state change, Flutter’s framework creates a new tree of widget instances.
    iOS中的UIView 是可变的并只会创建一次,除非setNeedsDisplay()调用后才会重构。

  • Widget的更新:只能通过 State对象 默默更新(manipulate)widget-tree。
    Flutter将Widget分为两大类,StatelessWidget 和 StatefulWidget(内部有State对象用来存储data和更新widget)。

  • 透明属性差异?
    iOS中直接使用属性.opacity、.alpha直接设置。而Flutter中,需要将widget包裹在OpacityWidget里面。

2、布局Layout的差异

  • Flutter中布局也是一种Widget,同样存在与widget-tree中。
    Layout widgets

3、如何添加和删除widget?

iOS可以通过方法addSubview()、removeFromSuperview() 直接添加和删除 view。

  • Flutter无法直接操作widget-tree,只能在ParentWidget构建中,通过 代码变量控制 返回不同的widgets。
    Instead, you can pass a function to the parent that returns a widget, and control that child’s creation with a boolean flag.

3、动画构建差异?

iOS直接通过调用withDuration:animations:方法,直接创建动画效果。

4、View的重绘

iOS依赖于CoreGraphics框架进行重绘。

  • Flutter 依赖于 Canvas 框架的APIs,一般是依赖于两个类 CustomPaint and CustomPainter

5、如何自定义Widget

iOS一般采用继承UIView重写View,然后组合方式添加Subviews;Flutter推荐采用组合的方式进行自定义widget。

二、导航

1、导航管理

iOS使用UINavigationController 进行导航堆栈的管理。

  • Flutter中使用NavigatorRoutes进行管理;其中Routes相当于页面的页面(screen&page),可以理解为iOS的UIViewController,而Navigator是负责管理Routes,可以理解为iOS的UINavigationController

2、两个App间如何进行跳转?

  • iOS通过url-schema、统一链接方式。
  • To implement this functionality in Flutter, create a native platform integration, or use an existing plugin, such as url_launcher.

三、多线程与异步

1、Flutter的单线程模式

  • iOS提供多种多线程技术,包括Operation、GCD、Thread、Perform等等。

  • Flutter中一般默认在主线程main-ui-thread中执行;也提供isolate的支持多线程概念,其有独立的内存地址和event-loops。

  • Flutter推荐使用Flutter/Stream 或 async/wait 实现异步,不卡主线程。

  • Flutter的单线程模型,让你不用考虑数据同步等线程问题;这一点和 Node.js 很像。
    Since Flutter is single threaded and runs an event loop (like Node.js), you don’t have to worry about thread management or spawning background threads.

2、Flutter支持多线程模式,isolate

  • 其有独立的内存堆,这一点和Thread不同,可又不是进程。
    In Flutter, use Isolates to take advantage of multiple CPU cores to do long-running or computationally intensive tasks.Isolates are separate execution threads that do not share any memory with the main execution memory heap.

  • isolate之间无法直接访问变量,只能通过消息机制,即port相关接口。
    This means you can’t access variables from the main thread, or update your UI by calling setState(). Isolates are true to their name, and cannot share memory (in the form of static fields, for example).

3、http请求

使用http package.
import 'package:http/http.dart'

四、UIViewController

  • Flutter的Widget 也担当 iOS的UIViewController 的职责。

1、生命周期的监听

  • iOS通过UIViewController 和 AppDelegate 的回调函数或Notification,监听应用和页面的生命周期。

  • Flutter通过 WidgetsBindingdidChangeAppLifecycleState() 监听
    AppLifecycleState documentation.

  • 监听的事件
    1、非活跃,inactive
    The application is in an inactive state and is not receiving user input. This event only works on iOS, as there is no equivalent event on Android.
    2、暂停,paused
    The application is not currently visible to the user, is not responding to user input, but is running in the background.
    3、唤醒,resumed
    The application is visible and responding to user input.
    4、中止,suspending
    The application is suspended momentarily. The iOS platform has no equivalent event.

五、TableView 和 ScrollView

1、UITableView/UICollectionView/ScrollView --> ListView

  • Cell的点击:Flutter通过 包裹手势或者点击Widget 给予支持。—— 这点iOS通过回调方式,高效的多。
  • 列表的动态更新
    Flutter中,推荐使用ListView.Builder更新列表数据;或者在setState()方法内,重新生成新List,否则不会更新。(这是因为setState()的机制是通过==比较数据是否变化,list变量不变,因此widget不更新。)

六、手势和点击事件的监听, Gesture detection and touch event handling

1、Flutter提供两种方法

  • widget支持,提供事件回调。如ElevatedButton
  • 使用 GestureRecognizer进行包裹widget。

2、GestureDetector 支持的手势

  • Tapping
    onTapDown
    A pointer that might cause a tap has contacted the screen at a particular location.
    onTapUp
    A pointer that triggers a tap has stopped contacting the screen at a particular location.
    onTap
    A tap has occurred.
    onTapCancel
    The pointer that previously triggered the onTapDown won’t cause a tap.

  • Double tapping
    onDoubleTap
    The user tapped the screen at the same location twice in quick succession.
    Long pressing

  • onLongPress
    A pointer has remained in contact with the screen at the same location for a long period of time.
    Vertical dragging

  • onVerticalDragStart
    A pointer has contacted the screen and might begin to move vertically.
    onVerticalDragUpdate
    A pointer in contact with the screen has moved further in the vertical direction.
    onVerticalDragEnd
    A pointer that was previously in contact with the screen and moving vertically is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.
    Horizontal dragging

  • onHorizontalDragStart
    A pointer has contacted the screen and might begin to move horizontally.
    onHorizontalDragUpdate
    A pointer in contact with the screen has moved further in the horizontal direction.
    onHorizontalDragEnd
    A pointer that was previously in contact with the screen and moving horizontally is no longer in contact with the screen.

七、风格

  • Flutter默认支持android-Material,WidgetsApp();或者iOS-Cupertino,CupertinoApp()
  • 支持自定义字体,在pubspec.yaml配置。

八、硬件交互

Interacting with hardware, third party services and the platform

1、原生代码交互,platform channel

  • PlatformChannel 是一套异步的消息机制。

2、支持访问原生的相机、GPS等功能。

3、自定义插件

Developing packages & plugins

九、持久化

参考

Flutter for iOS developers

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350