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_localizations 和 intl 包 支持國際化。

3、依賴包管理

iOS使用Cocoapod，F(xiàn)lutter使用pubspec.yaml進行管理。

一、View

1、UIView --> Widget

  • iOS中的UIView，可以等價于Flutter的Widget。

  • Widget 是不可變的；不管是widgets或者它們狀態(tài)的改變，F(xiàn)lutter框架都會創(chuàng)建新的widget-tree。
    Whenever widgets or their state change, Flutter’s framework creates a new tree of widget instances.
    iOS中的UIView 是可變的并只會創(chuàng)建一次，除非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:方法，直接創(chuàng)建動畫效果。

  • Flutter中，通過 animation-library 直接包裹widgets，依次創(chuàng)建動畫。
    In Flutter, use the animation library to wrap widgets inside an animated widget.
    例如，AnimationController、CurvedAnimation 、FadeTransition等類。

  • 詳見
    Animation & Motion widgets
    Animations tutorial
    Animations overview.

4、View的重繪

iOS依賴于CoreGraphics框架進行重繪。

  • Flutter 依賴于 Canvas 框架的APIs，一般是依賴于兩個類 CustomPaint and CustomPainter。

5、如何自定義Widget

iOS一般采用繼承UIView重寫View，然后組合方式添加Subviews；Flutter推薦采用組合的方式進行自定義widget。

二、導航

1、導航管理

iOS使用UINavigationController 進行導航堆棧的管理。

  • Flutter中使用Navigator 和 Routes進行管理；其中Routes相當于頁面的頁面（screen&page），可以理解為iOS的UIViewController，而Navigator是負責管理Routes，可以理解為iOS的UINavigationController；

2、兩個App間如何進行跳轉？

  • iOS通過url-schema、統(tǒng)一鏈接方式。
  • 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中執(zhí)行；也提供isolate的支持多線程概念，其有獨立的內存地址和event-loops。

  • Flutter推薦使用Flutter/Stream 或 async/wait 實現(xiàn)異步，不卡主線程。

  • Flutter的單線程模型，讓你不用考慮數(shù)據(jù)同步等線程問題；這一點和 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、生命周期的監(jiān)聽

  • iOS通過UIViewController 和 AppDelegate 的回調函數(shù)或Notification，監(jiān)聽應用和頁面的生命周期。

  • Flutter通過 WidgetsBinding 和 didChangeAppLifecycleState() 監(jiān)聽
    AppLifecycleState documentation.

  • 監(jiān)聽的事件
    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通過回調方式，高效的多。
  • 列表的動態(tài)更新
    Flutter中，推薦使用ListView.Builder更新列表數(shù)據(jù)；或者在setState()方法內，重新生成新List，否則不會更新。（這是因為setState()的機制是通過==比較數(shù)據(jù)是否變化，list變量不變，因此widget不更新。）

六、手勢和點擊事件的監(jiān)聽， 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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容