美文网首页
iOS开发初探Flutter

iOS开发初探Flutter

作者: 伟_d5cf | 来源:发表于2020-07-20 00:00 被阅读0次

    一、iOS环境下安装运行

    1.1、运行在模拟器

    • VSCode上,直接点击调试运行按钮,选择Start iOS Simulator;默认会选择iOS项目中选中的模拟器。


      vsCode.jpg
    • Android Studio上,选择open iOS Simulator;直接点击运行。


      Android Studio.png

    1.2、运行在iOS真机设备上

    1. 在flutter项目ios目录下用Xcode打开Runner.xcworkspace,在target设置页面Signing&Capabilities登录开发者账号,配置证书及其配置文件;


      image.png
    2. 若是平常的apple ID登录的话,后直接运行,安装至手机会报错,如若不然需要注册开发者账号申请开发证书进行配置。


      error.png
    3. 需要手机信任该开发者证书(设置->通用->描述文件与设备管理)。
      应用打开提示.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 也有类似的实现,使用了 NavigatorRoutes。一个路由是 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、数据库和本地存储

    1. 我怎么在 Flutter 中访问 UserDefaults?
      在 iOS 中,你可以使用属性列表来存储键值对的集合,即我们熟悉的 UserDefaults。
      在 Flutter 中,可以使用 Shared Preferences plugin来达到相似的功能。它包裹了 UserDefaluts 以及 Android 上等价的 SharedPreferences 的功能。
    2. 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

    相关文章

      网友评论

          本文标题:iOS开发初探Flutter

          本文链接:https://www.haomeiwen.com/subject/hvidhktx.html