一、iOS环境下安装运行
1.1、运行在模拟器
-
VSCode上,直接点击调试运行按钮,选择Start iOS Simulator;默认会选择iOS项目中选中的模拟器。
vsCode.jpg -
Android Studio上,选择open iOS Simulator;直接点击运行。
Android Studio.png
1.2、运行在iOS真机设备上
-
在flutter项目ios目录下用Xcode打开Runner.xcworkspace,在target设置页面Signing&Capabilities登录开发者账号,配置证书及其配置文件;
image.png -
若是平常的apple ID登录的话,后直接运行,安装至手机会报错,如若不然需要注册开发者账号申请开发证书进行配置。
error.png - 需要手机信任该开发者证书(设置->通用->描述文件与设备管理)。
应用打开提示.png 信任证书.png
flutter 在macOS上环境搭建
1.2、热重载
原生开发过程中,无法实现热重载,每次修改代码都必须通过(command + R)运行编译才能对新的代码调试。
热重载可以帮助您在无需重新启动应用的情况下快速、轻松地进行测试、构建用户界面、添加功能以及修复错误; 可以大大提高开发效率。
二、iOS层面上看flutter
2.1、UIView与Widget
在iOS中视图通常都是也UIView(一般的视图控件都是继承UIView)的实例对象来进行构建UI的;对比与Flutter,就好比其中的Widget,但又不能等同视之,UIView是实实在在的一种视图控件,而Widget我觉得它更像是一种对视图的申明,或者是作为UI特征的一种描述吧。
1.widget 拥有着不同的生命周期:整个生命周期内它是不可变的,且只能够存活到被修改的时候。一旦 widget 实例或者它的状态发生了改变, Flutter 框架就会创建一个新的由 Widget 实例构造而成的树状结构。而在 iOS 里,修改一个视图并不会导致它重新创建实例,它作为一个可变对象,只会绘制一次,只有在发生 setNeedsDisplay() 调用之后才会发生重绘。
2.iOS中,父视图添加子视图都是以addSubView来实现的,这个就是会出现每一个视图整体都是平级,相对独立的,而widget是通过widget一层一层的嵌套,这就会导致页面嵌套很多的情况下,代码非常繁杂,需要对其尽可能的抽取。
iOS视图.png flutter.png
3.iOS中,对事件监听包括手势事件处理通常使用代理<delegate>或者通知等形式实现的,但是flutter确实包裹一层widget;譬如对scrollview的滚动事件监听。
NotificationListener.png
4.iOS中,对一些视图属性通常都是以参数形式赋予UIView的视图对象,而在flutter有些需要通过包一层widget来实现,比如透明度。
opacity.png
5.约束布局,iOS的autolaout 在flutter中以padding参数体现。
6.动画,iOS通常以动画块的形式体现,而在 Flutter 中,使用动画库来包裹 widgets,而不是创建一个动画 widget。
2.2、导航/路由
在 iOS 中,你可以使用管理了 view controller 栈的 UINavigationController
来在不同的 view controller 之间跳转。
Flutter 也有类似的实现,使用了 Navigator
和 Routes
。一个路由是 App 中“屏幕”或“页面”的抽象,而一个 Navigator 是管理多个路由的 widget。你可以粗略地把一个路由对应到一个 UIViewController
。Navigator 的工作原理和 iOS 中 UINavigationController
非常相似,当你想跳转到新页面或者从新页面返回时,它可以 push()
和 pop()
路由。
但是,个人认为这样的路由是否页面繁多情况下会非常庞大,是有有可改进地方<问题>。
另外,通常iOS导航栏高度都是44,而在flutter中默认高度都是56。
2.3、图片资源
在iOS中,把通常把图片放于assets文件夹或者bundle目录下,assets里面有区分1x、2x、3x等几倍图,根据手机分辨率自动调整。
在flutter中,必须在 pubspec.yaml 文件中声明 assets (和位置),然后 Flutter 会把他们识别出来。
pubspec.png
把基础图片(1.0x)放置到 images 文件夹中,并把其他变体放置在子文件夹中,并接上合适的比例系数:
image.png
2.4、数据库和本地存储
- 我怎么在 Flutter 中访问 UserDefaults?
在 iOS 中,你可以使用属性列表来存储键值对的集合,即我们熟悉的 UserDefaults。
在 Flutter 中,可以使用 Shared Preferences plugin来达到相似的功能。它包裹了UserDefaluts
以及 Android 上等价的SharedPreferences
的功能。 - CoreData 相当于 Flutter 中的什么?
在 iOS 中,你通过 CoreData 来存储结构化的数据。这是一个 SQL 数据库的上层封装,让查询和关联模型变得更加简单。
在 Flutter 中,使用 SQFlite 插件来实现这个功能。
具体可以看flutter中文网
三、flutter与iOS原生交互
我们都知道Flutter开发的app是可以同时在iOS和Android系统上运行的。显然Flutter需要有和Native通信的能力。比如说,你的Flutter app要显示手机的电量,而电量只能通过平台的系统Api获取。这时就需要有个机制使得Flutter可以通过某种方式来调用这个系统Api并且获得返回值。那么Flutter是通过Platform Channels(平台通道)做到的。
Platform Channels的架构示意图.png
Platform channel通信的三种类型:
BasicMessageChannel:用于传递字符串和半结构化的信息,持续通信,收到消息后可以回复此次消息,如:Native将遍历到的文件信息陆续传递到dart,在比如:flutter将从服务端陆续获取到的信息交给Native加工,Native处理完返回等。
MethodChannel:用于传递方法调用(method invocation)一次性通信:如flutter调用Native拍照。
EventChannel:用于数据流(event stream)的通信,持续通信,收到消息后无法回复此次消息,通过长用于Nativie向flutter的通信,如:手机电量变化,网络连接变化,陀螺仪,传感器等;
这三种类型的Channel都是全双工通信,即A<=>B,flutter可以主动发送消息给Native端,并且Native接收到消息后可以做出回应,同样,Native端可以主动发送消息给flutter端,flutter端接收数据后给Native端。
参考:http://www.imooc.com/article/286076?block_id=tuijian_wz
Flutter和原生iOS交互:https://www.jianshu.com/p/5e5d54db8c7e
flutter学习笔记:自定义相机https://www.jianshu.com/p/c4d7c189ba78
总而言之,flutter所展示的页面内容其实是iOS中一个叫FlutterViewController的视图控制器,所以起调用原生页面也必须通过这个控制器进行跳转,是通过FlutterMethodChannel建立通道调用原生方法,这一点其实是跟WKWebView与js交互,调用原生方法是类似的。
四、构建打包
打包过程跟原生开发时打包是完全一样的,需要注意一下内容:
1.appIcon必须在Xcode里面进行设置,放于Assets.xcassets文件夹中。具体规则需按照要求的尺寸设置。
2.app兼容最低版本设置:Deployment Target。
3.所要用到的设备里面的权限需要在info.plist文件中配置清楚。
Target.png
info.png
网友评论