從iOS到Flutter開發(fā)的轉(zhuǎn)變過程

初識

第一次接觸Flutter是在2019年底。
Flutter發(fā)布時間不長， 當時沒有深入的接觸，嘗試著裝了開發(fā)環(huán)境，諸如遇到了很多問題Java安裝、AndroidStudio安裝、FlutterSDK下載、被墻等。
看著文檔查著資料一步步的去解決，所幸最后安裝成功了，運行了Deom，因為當時在做其他項目沒有做更深入的接觸。
隨后，因手中的項目已經(jīng)上線有了空余時間，加上公司要開發(fā)新項目并鼓勵使用Flutter來做，便開始了Flutter的研究及開發(fā)。
由于之前搭建過環(huán)境的機器已更換，所以又重新搭建了Flutter環(huán)境在新的Mac上，也借此機會重新熟悉了一次環(huán)境搭建過程并做了文字記錄，便于日后查找并發(fā)布到了平臺上。
歡迎交流，記錄見：Mac安裝Flutter開發(fā)環(huán)境。
Flutter因其多平臺的統(tǒng)一性使得公司及個人開發(fā)者而言有明顯的經(jīng)濟性效益提升。

語言轉(zhuǎn)換感言

因為之前一直在做iOS開發(fā)，項目大多用Objective-C少量涉及Swift，而Flutter是Google基于Dart語言開發(fā)的，Dart語言相較于Objective-C差別還是很大的，都說Objective-C是計算機語言中一個另類，其實也不為過。

學(xué)習(xí)資料推薦

Flutter實戰(zhàn)》電子書
Flutter中國開源項目

編輯器選擇

iOS：Xcode（也只能用Xcode，是一款很優(yōu)秀的編輯器）
Flutter：VSCode、Android Studio等，經(jīng)過這一段時間的使用個人認為在Mac上使用VSCode更好一些，頁面過度平滑，使用時卡頓很少而且各種配置功能很多，文件創(chuàng)建等相對便捷。

語言規(guī)則的對比

屬性聲明

Objective-C:

@property(nonatomic, assign) NSUInteger saveLimit;
@property(nonatomic, weak) id<DRLLogDelegate> delegate;

Dart:

  int connectTimeout = 10000;
  Map headers = {};

方法聲明

Objective-C:

- (void)addLog:(nonnull NSString *)content;

Dart:

processObtainRequest({NetworkRequest request}) {}

對象創(chuàng)建

Objective-C:

DRLLogMessage *message = [DRLLogMessage new];

Dart:

  Dio dio = Dio();

方法回調(diào)

Objective-C:

/// 接收回調(diào)
[commodityPuchaseGoodsRequest startWithSuccess:^(DNResponse *response) {

    } failure:^(NSError *error) {
        
    }];

/// 發(fā)起回調(diào)
- (void)startWithSuccess:(DNRequestSuccessBlock)success failure:(DNRequestFailureBlock)failure {
    __weak typeof(self) weakSelf = self;
    DNResponse * response = [DNResponse new];
    NSError *parseError = [NSError new];
    if(success) {
        success(response);
        
    }
    if (failure) {
        failure(parseError);
        
    }
}

Dart:

/// 接收回調(diào)
MineInformationUpdateGenderRequest(gender: age).start((response) {

    }, (errorResponse) {

    });

/// 發(fā)起回調(diào)
post(String urlPath, {Map<String, dynamic> parameter, Map<String, String> header, ResponceSuccess successBlock, ResponceError failureBlock, NetworkContentType contentType = NetworkContentType.applicationJson}) async {
    Response response;
    Map lastMap = parameter;
    try {
        response = await _dio.post(urlPath, data: lastMap);

      if (successBlock != null) {
        successBlock(response);

      }

    } on DioError catch (error) {
      Response errorRespones;
      if (failureBlock != null) {
        failureBlock(errorRespones);
      }
    }
  }

工程建立

iOS：
Xcode創(chuàng)建

Flutter：
終端、Android Studio VScode等

設(shè)計模式的選擇

iOS 一些小型項目通常采用MVC結(jié)構(gòu) 中大型項目會采用MVVM等結(jié)構(gòu)
Flutter因底層結(jié)構(gòu)生命周期和內(nèi)存管理機制會在設(shè)計模式上與iOS所使用的有些不同。
代理模式
iOS

///Log.h
@protocol LogDelegate <NSObject>

@optional
- (void)newLogMessage:(DRLLogMessage *)logMessage;

@end

@interface Log : NSObject

@property(nonatomic, weak) id<LogDelegate> delegate;

+ (instancetype)sharedLog;

@end

///Log.m
@implementation DRLLog
- (void)addLogWithType:(DRLLogType)type title:(nullable NSString *)title desc:(nullable NSString *)desc  {
      if ([weakSelf.delegate respondsToSelector:@selector(newLogMessage:)]) {
          [weakSelf.delegate newLogMessage:message];
       }
}
@end

///delegate.m
@interface DRLLogBrowseViewController ()<LogDelegate>
@property(nonatomic, strong) Log *logManager;
@end

@implementation DRLLogBrowseViewController
- (void)createContent {
    self.logManager = [DRLLog sharedLog];
    self.logManager.delegate = self;
}

- (void)newLogMessage:(DRLLogMessage *)logMessage {
//Do
}

@end

Flutter 要使用到 mixin 的超類


mixin NetworkInterceptorsDelegate {
  void onRequestDone(RequestOptions options, RequestInterceptorHandler handler);
  void onResponseDone(Response response, ResponseInterceptorHandler handler);
  void onErrorDone(DioError err, ErrorInterceptorHandler handler);
}

class NetworkLog with NetworkInterceptorsDelegate {
 void onRequestDone(RequestOptions options, RequestInterceptorHandler handler) {
//Do
 }
}

class NetworkInterceptors  {
  NetworkInterceptorsDelegate delegate;

  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    // TODO: implement onRequest
    super.onRequest(options, handler);

    if (delegate != null) {
      delegate.onRequestDone(options, handler);
    }
  }
}

代碼管理

iOS Flutter基本一致 Git SVN都適用；

第三方框架、插件的使用和選擇

Flutter因其高度的開源性非常收到開發(fā)者們的青睞，有很多優(yōu)秀的開源項目開源框架在Github中，且開發(fā)勢頭有暴增的趨勢，
Flutter開發(fā)常用第三方庫分享

UI搭建的轉(zhuǎn)變

Flutter有著高度封裝的UI模塊，很多樣式都可以找到現(xiàn)成的官方或第三方已搭建好的樣式，
列表加載優(yōu)化

生命周期

iOS生命周期

AppDelegate

- (BOOL)application:(UIApplication *)application willFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey,id> *)launchOptions {
    return YES;
}
//在App啟動時調(diào)用表示應(yīng)用加載進程已經(jīng)開始,常用來處理應(yīng)用狀態(tài)的存儲和恢復(fù)。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    return YES;
}
// 表示App將從未運行狀態(tài)進入運行狀態(tài),用于對App的初始化操作。
- (void)applicationDidBecomeActive:(UIApplication *)application{}
// 當應(yīng)用即將進入前臺運行時調(diào)用。
- (void)applicationWillResignActive:(UIApplication *)application{}
// 當應(yīng)用開始在后臺運行的時候調(diào)用。
- (void)applicationDidEnterBackground:(UIApplication *)application{}
// 當程序從后臺將要重新回到前臺（但是還沒變成Active狀態(tài)）時候調(diào)用。
- (void)applicationWillEnterForeground:(UIApplication *)application{}
// 已經(jīng)從后臺進入前臺
- (void)applicationDidBecomeActive:(UIApplication *)application{}
// 當前應(yīng)用即將被終止，在終止前調(diào)用的函數(shù)。通常是用來保存數(shù)據(jù)和一些退出前的清理工作。如果應(yīng)用當前處在suspended，此方法不會被調(diào)用。 該方法最長運行時限為5秒，過期應(yīng)用即被kill掉并且移除內(nèi)存。
- (void)applicationWillTerminate:(UIApplication *)application{}

控制器（ViewController）

// 1.init初始化
- (instancetype)init{
    if (self = [super init]) {
    }
    return self;
}
// 2.Nib加載成功 當時xib加載時
- (void)awakeFromNib{
    [super awakeFromNib];
}
// 3.加載view。
- (void)loadView{
    [super loadView];
}
// 4.載入完成，可以進行自定義數(shù)據(jù)以及動態(tài)創(chuàng)建其他控件
- (void)viewDidLoad {
    [super viewDidLoad];
}
// 5.視圖將出現(xiàn)在屏幕之前
- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
}
// 6.將要對子視圖進行調(diào)整
- (void)viewWillLayoutSubviews{
    [super viewWillLayoutSubviews];
}
// 7.對子視圖進行調(diào)整完畢
- (void)viewDidLayoutSubviews{
    [super viewDidLayoutSubviews];
}
// 8.視圖已在屏幕上渲染完成
- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
}
// 9.視圖將被從屏幕上移除
- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
}
// 10.視圖已經(jīng)被從屏幕上移除
- (void)viewDidDisappear:(BOOL)animated{
    [super viewDidDisappear:animated];
}
// 11.視圖被銷毀，此處需要對你在init和viewDidLoad中創(chuàng)建的對象進行釋放
- (void)dealloc{
}
// 12.內(nèi)存警告
- (void)didReceiveMemoryWarning{
    [super didReceiveMemoryWarning];
}

視圖（View）

// 1.當視圖添加子視圖時調(diào)用
- (void)didAddSubview:(UIView *)subview{
    [super didAddSubview:subview];
}
// 2.當子視圖從本視圖移除時調(diào)用
- (void)willRemoveSubview:(UIView *)subview{
    [super willRemoveSubview:subview];
}
// 3.當視圖即將加入父視圖時 / 當視圖即將從父視圖移除時調(diào)用
- (void)willMoveToSuperview:(nullable UIView *)newSuperview{
    [super willMoveToSuperview:newSuperview];
}
// 4.當視圖加入父視圖時 / 當視圖從父視圖移除時調(diào)用
- (void)didMoveToSuperview{
    [super didMoveToSuperview];
}
// 5.當視圖即將加入window視圖時 / 當視圖即將從window視圖移除時調(diào)用
- (void)willMoveToWindow:(nullable UIWindow *)newWindow{
    [super willMoveToWindow:newWindow];
}
// 6.當視圖加入window視圖時 / 當視圖從window視圖移除時調(diào)用
- (void)didMoveToWindow{
    [super didMoveToWindow];
}

Flutter Widget 生命周期

內(nèi)存管理機制

iOS：采用引用計數(shù)器對內(nèi)存進行管理；分為手動引用計數(shù)（MRC）和自動引用計數(shù)（ARC），OC的內(nèi)存機制可以簡單概括為：誰持有(retain)誰釋放(release)。retain引用計數(shù)+1，release反之。

Flutter：而在Flutter中與之對應(yīng)的是另外一套內(nèi)存管理機制，垃圾收集器；與Java有一些相似的地方
也整理了一部分關(guān)于這方面的資料: Flutter：內(nèi)存管理機制（內(nèi)存釋放、垃圾回收機制）

網(wǎng)絡(luò)

iOS

AFNetworking，作為一個成熟的第三方方案被運用到絕大多數(shù)iOS項目中，在實際開發(fā)中我們一般會對AFNetworking進行業(yè)務(wù)層的二次封裝，以便我們拓展出符合業(yè)務(wù)場景的功能。

Flutter

dio
針對dio我做了一些二次封裝：Flutter 網(wǎng)絡(luò)層封裝（dio封裝）
這層封裝更多的是偏向于實際中的項目開發(fā)，更適用于一些中大型項目；

圖片加載

iOS

SDWebImage，成熟的第三方網(wǎng)絡(luò)圖片加載方案，有針對圖片加載的多極緩存優(yōu)化，列表圖片加載的優(yōu)化，圖片緩存管理等，功能豐富實用簡單；

Flutter

cached_network_image，

Flutter開發(fā)中遇到的問題

在實際開發(fā)中遇到的問題做了整理歸納：Flutter開發(fā)相關(guān)問題匯總

未完待續(xù)

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容