Flutter混合项目实战

一、在Native页面跳转Flutter页面

Adding a Flutter screen to an iOS app

1、创建并运行FlutterEngine

lazy var flutterEngine = FlutterEngine(name: "my_flutter_engine")
flutterEngine.run();
GeneratedPluginRegistrant.register(with: self.flutterEngine);

2、展示页面

let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
present(flutterViewController, animated: true, completion: nil)

3、内存消耗
Native页面->启动引擎->跳转页面
80->159->176

Flutter内存消耗

遗留问题：
1、Native跳转到Flutter页面回不去了(路由，暂后置)
2、Native-->Flutter-->Native怎么交互

二、在Native页面跳转一个Flutter列表页

涉及：路由、传参、交互、请求列表、解析成model
flutter怎么用swift里面的数据模型

遇到的问题：
1、flutter需要重新封装一套网络请求类吗，还是能直接用iOS里面现成的�?能的话模型传值怎么弄？
flutter调用swift里面的网络请求方法，得到请求数据model，解析为list/map传递给flutter。可以这么搞，但是有个问题。iOS写的代码Android不能用。所以还是重新写一套网络请求类。

2、怎么生成Model类
手写太低效了
安装FlutterJsonBeanFactory这个插件

3、Mac AndroidStudio4.0.1搜索不到插件？
网上搜索的缓存等方法不管用，试下本地安装。尝试设置了自动代理，时好时坏。
插件官网https://plugins.jetbrains.com/androidstudio
网上下载然后本地安装，报错不匹配。
用在线转化吧json_to_dart

4、怎么在flutter模块里获取swift中的数据。直接获取swift中保存到本地UserDefault里面的数据是不行的，因为Flutter与原生项目的资源是不共享。
1、获取swift中的auth，传到flutter
2、在flutter中保存到SharedPreferences中
iOS端-发送数据

let messageChannel = FlutterBasicMessageChannel.init(name: "xx.message.xx", binaryMessenger: flutterViewController as! FlutterBinaryMessenger)
            messageChannel.sendMessage("hhhh") { (reply) in
                log.info("na->flutter message callback\(reply ?? "")")
            }

Flutter端-接收数据

static const messageChannel2 = const BasicMessageChannel('xx.message.xx', StandardMessageCodec());
messageChannel2.setMessageHandler((message) async {
      print('message : $message');
      return '从Native端返回来的数据';
    });

5、native flutter 通信怎么调试？
方法一：
用text显示出来。发现通过BasicMessageChannel传值无效。
后来经别人检查：是字符串常量不一致。拼写错误了。
方法二：
attach+xcode。

三、网络请求

四、布局

1、frame
Flutter里面没有frame(x,y,width,height)的概念，不是所有的组件都有padding属性来控制元素内不间距的.需要通过Padding组件来实现。

Container(有padding)：margin、padding、width、height属性。
Column等(没有padding)：用Container、Padding组件包围目标组件

Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0), // 给图片组件的左和上添加10的padding距离
              child: Image.network(imageList[index], fit: BoxFit.cover)
            )

2、分割线
第一种：Divider(Double:height,Double:indent,color:color)

Divider(height: 1.0,indent: 60.0,color: Colors.red,),

第二种：新建一个不带child Widget 的装饰容盒子，只使用边框参数，相当于一个没有高度的空白盒子

DecoratedBox(
    decoration:BoxDecoration(
        border:Border.all(color: Colors.grey[200],width: 1.0)
    ),
)，

3、Text文本字体变粗，且有黄色下划线
TextStyle里面设置（治标不治本）：
fontWeight: FontWeight.normal,
decoration: TextDecoration.none,
去掉下划线之后字体不对：Text有默认fontsize和fontweight，修改一下。

4、绝对定位
left、top 、right、 bottom、width、height

Positioned(
        left: 18.0,
        child: Text("I am Jack"),
      ),

5、flutter怎么让一个button距离右边10？
对FlatButton包裹一层Container，然后用margin试试

6、怎么让Icon和Text组件之间间距为20？

Icon(Icons.search),
SizedBox(width: 20,)
Text("搜索商品、品牌")

sizedBox可以作为父级元素，包裹着它的孩子，强制控制它的孩子的宽高。
sizedBox没有孩子，则控制自身的宽高，可以作为一个占位组件。
sizedBox可以设置某个方向向父级元素一样宽或者高：width: double.infinity,

7、怎么写一个带icon和label的button？
系统有一个FlatButton.icon，模仿即可

child: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
             icon,
             const SizedBox(width: 8.0),
             label,
           ],
         ),

五、小知识

1、除：/，整除：~/，取余：%
2、判断平台import 'dart:io';Platform.isIOS

六、遇到问题

1、原生push进入flutter页面，怎么返回native页面？
调用Navigator.pop(context);返回一个黑屏页面。
调用SystemNavigator.pop();没反应
用FlutterMethodChannel，在flutter里面调用原生的方法：

let methodChannel = FlutterMethodChannel.init(name: "xx.xx/xx", binaryMessenger: flutterViewController as! FlutterBinaryMessenger)
            methodChannel.setMethodCallHandler { (call, res) in
                if call.method == "popToNative" {
                    self.navigationController?.popViewController(animated: true)
                    self.navigationController?.setNavigationBarHidden(false, animated: false)
                }
            }
            self.navigationController?.setNavigationBarHidden(true, animated: false)
            self.navigationController?.push(flutterViewController, ...)

注意popToNative方法的pop和hide先后顺序，不然会出现flutter页面pop到native页面之后导航栏标题闪动一下的现象。

2、怎么解决滑动的少许卡顿感？
listView是一个一个item加载的

3、怎么解决下一次看到的还是上一次的页面内容？
flutterViewController

4、appbar怎么表现的像iOS原生一样？

5、新电脑flutter配置环境正常，dart文件报错找不到flutter库？
原因是AS安装plugins的时候，dart、flutter、flutterJson。flutter会默认安装dart，flutterJson会默认安装flutter和dart。所以同时点击安装flutter和flutterJson，会冲突，导致flutter安装失败或者dart安装失败。解决办法：只安装flutterJson。或者按照顺序dart、flutter、flutterJson。

pub.flutter-io.cn%0D is not a valid link-local address but contains %. Scope id should be used as part of link-local address. (at character 18)
原因：用word文档复制过去的环境配置变量，.zshrc文件里面的PUB_HOSTED_URL后面多了看不见的符号。https://github.com/dart-lang/pub/issues/2537
解决办法：删除pub.flutter-io.cn后面多余的看不见的符号

6、升级flutter1.20.2后运行工程报错
报错：Required plug-in compatibility UUID C80A9C11-3902-4885-944E-A035869BA910 for plug-in at path '~/Libr
解决：打开目录~/Library/Application Support/Developer/Shared/Xcode/Plug-ins删除xcode插件。
https://www.jianshu.com/p/bf48ab908bba

报错：Error: Could not resolve the package 'characters' in 'package:characters/characters.dart'.
解决：flutter pub cache repair卡住，用flutter clean解决

7、跑Android模拟器
Not applicable for the main.dart configuration
用左边的Flutter Device Selection

七、AS小技巧

查看一个类中所有的方法：cmd+f12或Navigate -> File structure