Flutter移动端实战手册

时间  2019-11-06
标签 flutter 移动 实战 手册 栏目 无线 繁體版
原文   原文链接
该文章属于<简书 — 刘小壮>原创，转载请注明：

<简书 — 刘小壮> https://www.jianshu.com/p/d27c1f5ee3ffgit

封面图

iOS接入Flutter

在进行iOS和Flutter的混编时，iOS比Android的接入方式略复杂，但也还好。如今市面上有很多接入Flutter的方案，但大多数都是千篇一概相互抄的，没什么意义。github

进行Flutter混编以前，有一些必要的文件。shell

  1. xcode_backend.sh文件，在配置flutter环境的时候由Flutter工具包提供。
  2. xcconfig环境变量文件，在Flutter工程中自动生成，每一个工程都不同。

xcconfig文件

xcconfig是Xcode的配置文件，Flutter在里面配置了一些基本信息和路径，接入Flutter前须要先将xcconfig接入进来，不然一些路径等信息将会出错或找不到。编程

Flutter的xcconfig包含三个文件，Debug.xcconfig、Release.xcconfig、Generated.xcconfig，须要将这些文件配置在下面的位置，而且按照不一样环境配置不一样的文件。xcode

Project -> Info -> Development Target -> Configurations
复制代码

系统设置

有些比较大的工程中已经在Configurations中设置了xcconfig文件，因为每一个Target的一种环境只能配置一个xcconfig文件，因此能够在已有的xcconfig文件中import引入Generated.xcconfig文件，而且不须要区分环境。微信

脚本文件

xcode_backend.sh脚本文件用来构建和导出Flutter产物，这是Flutter开发包为咱们默认提供的。须要在工程Target的Build Phases加入一个Run Script文件，并将下面的脚本代码粘贴进去。须要注意的是，不要忘记前面的/bin/sh操做，不然会致使权限错误。网络

/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
复制代码

在xcode_backend.sh中有三个参数类型，build、thin、embed，thin没有太大意义，其余两个则负责构建和导出。app

混合开发

随后能够对Xcode工程进行编译，这时候确定会报错的。可是不要慌张，报错后咱们在工程主目录下会发现一个名为Flutter的文件夹，其中会包含两个framework，这个文件夹就是Flutter的编译产物，咱们将这个文件夹总体拖入项目中便可。less

这时候就能够在iOS工程中添加Flutter代码了，下面是详细步骤。async

  1. 将AppDelegate的集成改成FlutterAppDelegate，而且须要遵循FlutterAppLifeCycleProvider代理。
#import <Flutter/Flutter.h>
#import <UIKit/UIKit.h>

@interface AppDelegate : FlutterAppDelegate <FlutterAppLifeCycleProvider>

@end
复制代码
  1. 建立一个FlutterPluginAppLifeCycleDelegate的实例对象，这个对象负责管理Flutter的生命周期，并从Platform侧接收AppDelegate的事件。我直接将其声明为一个属性，在AppDelegate中的各个方法中，调用其方法进行中转操做。
- (BOOL)application:(UIApplication *)application willFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [self.lifeCycleDelegate application:application willFinishLaunchingWithOptions:launchOptions];
    return YES;
}

- (void)applicationWillResignActive:(UIApplication *)application {
    [self.lifeCycleDelegate applicationWillResignActive:application];
}

 - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
    [self.lifeCycleDelegate application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
    return YES;
}
复制代码
  1. 随后便可加入Flutter代码，加入的方式也很简单，直接实例化一个FlutterViewController控制器便可，也不须要传其余参数进去(这里先不考虑多实例的问题)。
FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
复制代码

Flutter将其看作是一个画布，实例化一个画布上去以后，任何操做其实都是在当前页面完成的。

常见错误

到这个步骤集成操做就已经完成，可是不少人在集成过程当中会遇到一些错误，下面是一些常见错误。

  1. 路径错误，读取不到xcode_backend.sh文件等。这是由于环境变量FLUTTER_ROOT没有获取到，FLUTTER_ROOT配置在Generated.xcconfig中，能够看一下这个文件是否是配置的有问题。
  2. lipo info *** arm64相似这样的错误，通常都是由于xcode_backend.sh脚本致使的，能够检查一下FLUTTER_ROOT环境变量是否正确。
  3. 下面这种问题通常都是由于权限致使的，能够查看Build Phases的脚本写的是否是有问题。
***/flutter_tools/bin/xcode_backend.sh: Permission denied
复制代码

混合开发

在进行混编过程当中，Flutter有一个很大的优点，就是若是Flutter代码出问题，不会致使原生应用的崩溃。当Flutter代码出现崩溃时，会在屏幕上显示错误信息。

在开发过程当中常常会涉及到网络请求和持久化的问题，若是混编的话可能会涉及到写两套逻辑。例如网络请求有一些公共参数，或返回数据的统一处理等，若是维护两套逻辑的话会容易出问题。因此建议将网络请求和持久化操做都交给Platform处理，Flutter侧只负责向Platform请求并拿来使用便可。

这个过程就涉及到两端数据交互的问题，Flutter对于混编给出了两套方案，MethodChannel和EventChannel。从名字上来看，一个是方法调用，另外一个是事件传递。但实际开发过程当中，只须要使用MethodChannel便可完成全部需求。

Flutter to Native

下面是Flutter调用Native的代码，在Native中经过FlutterMethodChannel设置指定的回调代码，而且在接收参数并处理。由Flutter经过MethodChannel对Native发起调用，并传入对应的参数。

代码中在Flutter侧构建好数据模型，而后调用MethodChannel的invokeMethod，会触发Native的回调。Native拿到Flutter传过来的数据，进行解析并执行播放操做，随后会把播放的状态码回调给Flutter侧，交互完成。

import 'package:flutter/services.dart';

Future<Null> playVideo() async{
  var methodChannel = MethodChannel('flutterChannelName');
  Map params = {'playID' : '302998298', 'duration' : '2520', 'name' : '三生三世十里桃花'};
  String result;
  result = await methodChannel.invokeMethod('PlayAlbumVideo', params);

  String playID   = params['playID'];
  String duration = params['duration'];
  String name     = params['name'];
  showCupertinoDialog(context: context, builder: (BuildContext context){
    return CupertinoAlertDialog(
      title: Text(result),
      content: Text('name:$name playID:$playID duration:$duration'),
      actions: <Widget>[
        FlatButton(
          child: Text('肯定'),
          onPressed: (){
            Navigator.pop(context);
          },
        )
      ],
    );
  });
}
复制代码
NSString *channelName = @"flutterChannelName";
FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterVC];
[methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
    if ([call.method isEqualToString:@"PlayAlbumVideo"]) {
        NSDictionary *params = call.arguments;
        
        VideoPlayerModel *model = [[VideoPlayerModel alloc] init];
        model.playID = [params stringForKey:@"playID"];
        model.duration = [params stringForKey:@"duration"];
        model.name = [params stringForKey:@"name"];
        NSString *playStatus = [SVHistoryPlayUtil playVideoWithModel:model 
                                                        showPlayerVC:self.flutterVC];
        
        result([NSString stringWithFormat:@"播放状态 %@", playStatus]);
    }
}];
复制代码

Native to Flutter

Native调用Flutter的代码和Flutter调用Native的基本相似，只是调用和设置回调的角色不一样。一样的，Flutter因为要接收Native的消息回调，因此须要注册一个回调，由Native发起对Flutter的调用并传入参数。

Native和Flutter的相互调用都须要设置一个名字，每个名字对应一个MethodChannel对象，每个对象能够发起屡次调用，不一样调用以invokeMethod作区分。

import 'package:flutter/services.dart';

@override
void initState() {
    super.initState();
    
    MethodChannel methodChannel = MethodChannel('nativeChannelName');
    methodChannel.setMethodCallHandler(callbackHandler);
}

Future<dynamic> callbackHandler(MethodCall call) {
    if(call.method == 'requestHomeData') {
      String title = call.arguments['title'];
      String content = call.arguments['content'];
      showCupertinoDialog(context: context, builder: (BuildContext context){
        return CupertinoAlertDialog(
          title: Text(title),
          content: Text(content),
          actions: <Widget>[
            FlatButton(
              child: Text('肯定'),
              onPressed: (){
                Navigator.pop(context);
              },
            )
          ],
        );
      });
    }
}
复制代码
NSString *channelName = @"nativeChannelName";
FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterVC];
[RequestManager requestWithURL:url success:^(NSDictionary *result) {
    [methodChannel invokeMethod:@"requestHomeData" arguments:result];
}];
复制代码

调试工具集

在iOS和Android开发中，各自的编译器都提供了很好的调试工具集，方便进行内存、性能、视图等调试。Flutter也提供了调试工具和命令，下面基于VSCode编译器来说一下Flutter调试，相对而言Android Studio提供的调试功能可能会更多一些。

性能调试

VSCode支持一些简单的命令行调试指令，在程序运行过程当中，在Command Palette命令行面板中输入performance，并选择Toggle Performance Overlay命令便可。此命令有一个要求就是须要App在运行状态。

性能调试

随后会在界面上出现一个性能面板，这个页面分为两部分，GPU线程和UI线程的帧率。每一个部分分为三个横线，表明着不一样的卡顿层级。若是是绿色则表示不会影响界面渲染，若是是红色则有可能会影响界面的流畅性。若是出现红色线条，则表示当前执行的代码须要优化。

Dart DevTools

VSCode为Flutter提供了一套调试工具集-Dart DevTools，这套工具集功能很是全，包含性能、UI、热更新、热重载、log日志等不少功能。

安装Dart DevTools后，在App运行状态下，能够在VSCode的右下角启动这个工具，工具会以网页的形式展示，而且能够控制App。

主界面

下面是Dart DevTools的主界面，我运行的是一个界面相似于微信的App。从Inspector中能够看到页面的视图结构，Android Studio也有相似的功能。页面总体是一个树形结构，而且选中某一个控件后，会在右侧展现出控件的变量值，例如frame、color等，这个功能很是实用。

Dart DevTools

我运行的设备是Xcode模拟器，若是想切换Android的Material Design，点击上面的iOS按钮便可直接切换设备。刚才上面说到的查看内存的性能面板，点击iOS按钮旁边的Performance Overlay便可出现。

Select Widget

若是想知道在Dart DevTools中选择的节点，具体对应哪一个控件，能够选择Select Widget Mode使屏幕上被选中的控件高亮。

Select Widget Mode

Debug Paint

点击Debug Paint可让每一个控件都高亮，经过这个模式能够看到ListView的滑动方向，以及每一个控件的大小及控件之间的距离。

Debug Paint

除此以外，还能够选择Paint Baseline使全部控件的底线高亮，功能和Debug Paint相似，不作叙述。

Memory

Dart DevTools中提供的内存调试工具更加直观，能够实时显示内存使用状况。在刚开始运行时，咱们发现一个内存峰值，把鼠标放上去能够看到具体的内存使用状况。内存会有具体分类，Used、GC等。

Memory

Dart DevTools的内存工具仍是不够完美，Xcode能够选择某段内存，看到这块内存中涉及到主要堆栈调用，而且点击调用栈能够跳转到Xcode对应的代码中，而Dart DevTools还不具有这个功能，可能和Web的展现形式有关系。

内存管理Flutter使用的是GC，回收速度可能不是很快，iOS中的ARC则是基于引用计数当即回收的。还有不少其余的功能，这里就不一一详细叙述了，各位同窗能够本身探索。

多实例

项目中是经过实例化FlutterViewController控制器来显示Flutter界面的，整个Flutter页面能够理解为一个画布，经过页面不断的变化，改变画布上的东西。因此，在单实例的状况下，Flutter页面中间不能插入原生页面。

这时候若是咱们想在多个地方展现Flutter页面，而这些页面并非Flutter -> Flutter的连贯跳转形式，那怎么来实现这个场景呢？Google的建议是建立Flutter的多实例，并经过传入不一样的参数实例化不一样的页面。但这样会形成很严重的内存问题，因此并不能这么作。

Router

若是不能真正建立多个实例对象，那就须要经过其余方式来实现多实例。Flutter页面显示其实并非跟着FlutterVC走的，而是跟着FlutterEngine走的。因此在建立一次FlutterVC以后，就将FlutterEngine保存下来，在其余位置建立FlutterVC时直接经过FlutterEngine的方式建立，而且在建立后进行跳转操做。

在进行页面切换时，经过channelMethod调用Flutter侧的路由切换代码，并将切换后的新页面FlutterVC添加到Native上。这种实现方式，就是经过Flutter的Router的方式实现的，下面将会介绍Router的两种表现形式，静态路由和动态路由。

静态路由

静态路由是MaterialApp提供的一个API，routes本质上是一个Map对象，其组成结构是key是调用页面的惟一标识符，value就是对应页面的Widget。

在定义静态路由时，能够在建立Widget时传入参数，例如实例化ContactWidget时就能够传入对应的参数过去。

void main() {
  runApp(
    MaterialApp(
      home: Page2(),
      routes: {
        'page1': (_) => Page1(),
        'page2': (_) => Page2()
      },
    ),
  );
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ContactWidget();
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HomeScreen();
  }
}
复制代码

进行页面跳转时，经过Navigator进行调用，每次调用都会从新建立对应的Widget。进行调用时pushNamed函数会传入一个参数，这个参数就是定义Map时对应页面的key。

Navigator.of(context).pushNamed('page1');
复制代码
动态路由

静态路由的方式并非很灵活，相对而言动态路由更加灵活。动态路由不须要预先设定routes，直接调用便可。和普通push不一样的是，动态路由在push时经过PageRouteBuilder来构建push对象，在Builder的构建方法中执行对应的页面跳转操做便可。

结合以前说的channelMethod，就是在channelMethod对应的Callback回调中，执行Navigator的push函数，接收Native传递过来的参数并构建对应的Widget页面，将Widget返回给Builder便可完成页面跳转操做。因此说动态路由的方式很是灵活。

不管是经过静态路由仍是动态路由的方式建立，均可以经过then函数接收新页面返回时的返回值。

Navigator.of(context).push(PageRouteBuilder(
    pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
      return ContactWidget('next page value');
    }
    transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
      return FadeTransition(
        child: child,
        opacity: animation,
      );
    }
)).then((onValue){
      print('pop的返回值 $onValue');
});
复制代码

但动态路由的跳转方式也有一些问题，会致使动画失效。因此须要重写Builder的transitionsBuilder函数，来自定义转场动画。

不管是经过静态路由仍是动态路由的方式建立，都会存在一些问题。因为每次都是新建立Widget，因此在建立时会有黑屏的问题。并且每次建立的话，都会丢失当前页面上次的上下文状态，每次进来都是一个新页面。

简书因为排版的问题，阅读体验并很差，布局、图片显示、代码等不少问题。因此建议到我Github上，下载Flutter编程指南 PDF合集。把全部Flutter文章总计三篇，都写在这个PDF中，并且左侧有目录，方便阅读。

Flutter编程指南

下载地址：Flutter编程指南 PDF 麻烦各位大佬点个赞，谢谢！😁

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程