Ios Developer 入门FLutter 整理

 Flutter 中很多的功能和配置都依赖于移动端操作系统。Flutter 是移动端绘制 UI 的一种新方式,而对于非 UI 层面的任务,它通过插件机制来和 iOS(Android)系统进行通信。

UIView 相当于 Flutter 中的什么?

 UIView 能够进行类比的就是 Widget

Widget 和 UIView 还是有着相当一部分区别的

widget 整个生命周期内它是不可变的,且只能够存活到被修改的时候。

一旦 widget 实例或者它的状态发生了改变, Flutter 框架就会创建一个新的由 Widget 实例构造而成的树状结构。

iOS 里,修改一个视图并不会导致它重新创建实例;它作为一个可变对象,只会绘制一次,只有在发生 setNeedsDisplay() 调用之后才会发生重绘。

我该如何更新 widget?

Widget 是不可变的,无法被直接更新,你需要操作 Widget 的状态。

有状态 (Stateful) 和无状态 (Stateless) Widget

StatefulWidget 有一个跨帧存储和恢复状态数据的 State 对象

 iOS 可以直接对视图进行修改

如何对 widget 做布局?Storyboard 哪去了?

 iOS 开发中,使用 Storyboard 来组织你的视图

 iOS开发中,通过 Storyboard 或者在 ViewController 中通过代码来设置约束。

widget 添加 padding,来达到类似在 iOS 中视图约束的作用。

如何增加或者移除一个组件?

在 iOS 中,调用父视图的 addSubview() 方法或者 removeFromSuperview() 方法来动态的添加或移除视图。

通过布尔标记值控制子 Widget 的创建,返回一个 Widget 的父 Widget 传入一个方法

如何添加动画?

在 iOS 里,调用视图的 animate(withDuration:animations:) 方法来创建动画。

Animation<double> 的子类 AnimationController 来暂停、播放、停止以及逆向播放动画

Ticker 在垂直同步 (vsync) 的时候发出信号

运行的时候创建一个介于 0 和 1 之间的线性插值

可以创建一个或多个 Animation,并将它们绑定到控制器上

如何渲染到屏幕上?

在 iOS 里,可以使用 CoreGraphics 绘制线条和图形到屏幕上。

绘制的类:CustomPaint 和 CustomPainter

CustomPainter实现自定义的绘制算法

如何设置视图 widget 的透明度?

在 iOS 里,视图都有一个 opacity 或者 alpha 属性。

 Flutter 里,大部分时候你都需要封装 widget 到一个 Opacity widget 中来实现这一功能。

如何构建自定义 widget?

 组合更小的 Widget 来创建自定义 Widget

如何在两个页面之间切换?

在 iOS 里,多个 viewcontroller 中切换,使用 UINavigationController 管理 viewcontroller 构成的栈进行显示。

使用 Navigator 和 Route 在同一个 Activity 内的不同界面间进行跳转

Route 是应用内屏幕和页面的抽象,Navigator 是管理路径 route 的工具

Navigator 可以通过对 route 进行压栈和弹栈操作实现页面的跳转。

Navigator 的工作原理和栈相似, route 压栈 (push()),route 弹栈 (pop())

Navigator 类负责 Flutter 的导航,并用来接收被压栈的 route 的返回值。这是通过在 push() 后返回的 Future 上 await 来实现的。

如何跳转到其他应用?

在 iOS 里,想要跳转到其他应用,可以使用特定的 URL scheme。

Flutter 使用 url_launcher 插件

如何退回到 iOS 原生的 viewcontroller?

在 Dart 代码中调用 SystemNavigator.pop() 将会调用下面的 iOS 代码:

UIViewController* viewController = [UIApplication sharedApplication].keyWindow.rootViewController;
  if ([viewController isKindOfClass:[UINavigationController class]]) {
    [((UINavigationController*)viewController) popViewControllerAnimated:NO];
  }

如何编写异步代码?

Dart 有一个单线程执行的模型

支持 Isolate (在另一个线程运行 Dart 代码的方法)

Isolate 是一个事件循环和异步编程方式

Flutter 中的事件循环类似于 iOS 中的 main loop—,也就是主线程上的 Looper

如何让你的任务在后台线程执行?

Flutter 是单线程并且运行一个事件循环

无须担心线程的管理以及后台线程的创建

执行和 I/O 绑定的任务(例如存储访问或者网络请求,那么你可以安全地使用 async/await

你需要执行消耗 CPU 的计算密集型工作,那么你可以将其转移到一个 Isolate 上以避免阻塞事件循环

Isolate 来利用多核处理器的优势执行耗时或计算密集的任务

Isolate 是独立执行的线程,不会和主执行内存堆分享内存。


如何发起网络请求?

Flutter 中使用流行的 http 包 进行网络请求

展示耗时任务的进度

 iOS 里,在后台运行耗时任务时,会使用 UIProgressView

使用 ProgressIndicator widget。通过代码逻辑使用一个布尔标记值控制进度条的渲染。

build 方法被拆分成三个不同的方法。如果 showLoadingDialog() 返回 true(当 widgets.length == 0),渲染 ProgressIndicator。否则,在 ListView 里渲染网络请求返回的数据。

字符串存储在哪里?如何处理本地化?

iOS 里有 Localizable.strings 文件

Flutter 只支持美式英语的本地化字符串。如果你需要添加其他语言支持,请引入 flutter_localizations 库。同时你可能还需要添加 intl 库来使用 i10n 机制,比如日期 / 时间的格式化等。

Flutter 应用里的国际化

CocoaPods 相当于 Flutter 中的什么?如何添加依赖?

在 iOS 里,可以通过 Podfile 添加依赖

Flutter 使用 Dart 构建系统和 Pub 包管理器来处理依赖

ViewControllers 相当于 Flutter 中的什么?

在 iOS 里,ViewController 是用户界面的一部分,通常是作为屏幕或者其中的一部分来使用

 Flutter 中的屏幕也是使用 Widgets 表示的,因为“万物皆 widget!”。

Naivgator 在不同的 Route 之间切换,而不同的路由则代表了不同的屏幕或页面,或是不同的状态,也可能是渲染相同的数据。

如何监听 iOS 中的生命周期?

在 iOS 里,可以重写 ViewController 的方法来捕获自身的生命周期,或者在 AppDelegate 中注册生命周期的回调。

Flutter 中在 WidgetsBinding 的 observer 中挂钩子,监听 didChangeAppLifecycleState() 事件,来实现相应的功能。

可监听的生命周期事件有:

inactive :应用当前处于不活跃状态,不接收用户输入事件。这个事件只在 iOS 上有效,Android 中没有类似的状态。

paused:应用当前处于用户不可见状态,不接收用户输入事件,但仍在后台运行。

resumed:应用可见,也响应用户输入。

suspending:应用被挂起,在 iOS 平台没有这一事件。

UITableView 和 UICollectionView 相当于 Flutter 中的什么?

在 iOS 里,你可能使用 UITableView 或者 UICollectionView 来展示一个列表。

在 iOS 中,你通过 delegate 方法来确定显示的行数,相应位置的 cell,以及 cell 的尺寸。

在 Flutter 里,你可以使用 ListView 来达到类似的实现。

如何确定列表中被点击的元素?

在 iOS 里,可以通过 tableView:didSelectRowAtIndexPath: 代理方法来实现。

Flutter 通过 widget 传递进来的 touch 响应处理来实现。

如何动态更新 ListView

在 iOS 里,可以更新列表的数据,然后通过调用 reloadData 方法来通知 tableView 或者 collectionView。

在 Flutter 里,如果你在 setState() 中更新了 widget 列表,你会发现展示的数据并不会立刻更新。这是因为当 setState() 被调用时,Flutter 的渲染引擎回去检索 widget 树是否有改变。当它获取到 ListView,会进行 == 判断,然后发现两个 ListView 是相等的。没发现有改变,所以也就不会进行更新。

一个推荐的、高效且有效的方法就是使用 ListView.Builder 来构建列表。当你的数据量很大,且需要构建动态列表时,这个方法会非常好用。

如何给 Flutter 的 widget 添加点击事件?

在 iOS 里,通过把 GestureRecognizer 绑定给 UIView 来处理点击事件。

如果 Widget 支持事件监听,那么向它传入一个方法并在方法中处理事件。例如,RaisedButton 有一个 onPressed 参数

如果 Widget 不支持事件监听,将 Widget 包装进一个 GestureDetector 中并向 onTap 参数传入一个方法。

参考

 

猜你喜欢

转载自blog.csdn.net/u013491829/article/details/109433727