flutter调用iosview Flutter调用原生framework

[Flutter Package]类iOS使用方法的SectionTableView

此控件的package我已经托管到了 pub仓库

如果你被墙住了，也可以看 国内镜像

使用方式就是在你的flutter pubspec.yaml中添加依赖：

然后flutter packages get更新依赖即可

最近写demo时发现Flutter自带的ListView widget很简陋，没有分隔线，没有section/row之分，也没有sectionHeader，如果要实现一个有分割线，有section区分，有section header的ListView，耦合会非常严重：

在 上没有找到封装好的这种TableView，于是乎决定自己写一个，命名为SectionTableView

本人是iOS开发，所以习惯了iOS上的UITableView的调用风格，所以在实现flutter的SectionTableView时，决定实现如下功能

为了实现这些功能，并且方便后期增加滚动功能，上下拉刷新功能，使用了StatefulWidget作为父类：

接着在对应的_SectionTableViewState中的build方法中，返回ListView：

熟悉flutter ListView的同学知道，ListView的builder类方法，有一个itemBuilder回调函数，参数是当前的上下文，和将要渲染的行索引index，index对应想要获取的某一行控件(cell或者叫ListItem)，返回非空的组件就证明这个index有值，返回null就表示列表到尽头了。

我们需要做的就是对index进行映射，判断当前index对应的控件，应该是列表里的section header，还是分隔线devider，还是某一行的真正内容cell。

出于性能的考虑，不可能每次调用 _buildCell的时候，都计算一遍index对应的section和row的位置，所以定义了一个类成员变量indexPathSearch，是数组，数组长度就是ListView所有的行，当 _buildCell 的参数index大于等于indexPathSearch的长度的时候，就返回null，表示列表内容到此为止了。

indexPathSearch里每一个元素，就是index对应的section和row（称为indexPath），index指向实际行(cell)的时候，section和row都是大于等于0的，当section大于等于0，row==-1的时候，表示这里是一个section header，当两者都等于-1的时候，表示这里是一个分割线：

计算好了index到indexPath的映射，剩下的就好说了，在_buildCell中，提取indexPath并判断indexPath的内容，返回对应的控件：

这是我的第一个flutter package，目前还很简陋，flutter目前尚且如此，所以大家一起改善它，

下一步将优化如下内容：

如果大家喜欢，请多多star我的 项目GitHub

相关问答

Q1: Flutter笔记-调用原生IOS高德地图sdk

2017年底因公司业务组合部门调整，新的团队部分维护的项目用React Native技术混合开发。为适应环境变化，开启疯狂RN学习之旅，晚上回来啃资料看视频。可能由于本身对RN技术体验不感冒或者在环境之下强迫学习有点不爽。开始寻找代替方案，Fluter像一束曙光引起了我的注意，之后一直关注并利用闲余时间开始探索。2018年一直学习到使用Flutter写项目，从0.2.0开始到现在1.5版本的发布，终于开始慢慢的爬出坑位了，但是因为部分控件感觉还是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因项目中严重使用依赖地图，故而做了Fluterr使用原生IOS高德地图调研。因为我本身是一名android开发人员，初学IOS并记录下来。

PlatformView是 flutter 官方提供的一个可以嵌入 Android 和 iOS 平台原生 view 的小部件。

在我们实际开发中，我们遇到一些 flutter 官方没有提供的插件可以自己创建编写插件来实现部分功能，但是原生View在 flutter 中会遮挡住flutter 中的小部件，比如你想使用高德地图sdk、视频播放器、直播等原生控件，就无法很好的与 flutter 项目结合。

1、info.plist文件设置

2、 ios 端实现原生组件PlatformView提供原生view

3 、ios 端创建PlatformViewFactory用于生成PlatformView

4、 ios 端创建FlutterPlugin用于注册原生组件

5 、flutter 平台嵌入 原生view

iOS端的UiKitView目前还只是preview状态, 默认是不支持的, 需要手动打开开关, 在info.plist文件中新增一行io.flutter.embedded_views_preview为true.

创建类 FlutterMapView 并实现FlutterPlatformView 协议

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

请前往 高德开放平台控制台 申请 iOS Key。

注意：Bundle Identifier需要与申请的时候填写的一致

地图依赖的库列举如下：

基础 SDK AMapFoundationKit.framework

第一步：将解压后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夹中，左侧目录选中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中点击“+”按钮，在弹出的窗口中点击“Add Other”按钮，选择工程目录下的 MAMapKit.framework 文件添加到工程中。

千万不要忘记将AMapFoundationKit也一起加入工程。

3D地图正确配置应如下图所示：

需要引入的资源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle资源文件中存储了定位、默认大头针标注视图等图片，可利用这些资源图片进行开发。

左侧目录中选中工程名，在右键菜单中选择Add Files to “工程名”…，从MAMapKit.framework中选择AMap.bundle文件，并勾选“Copy items if needed”复选框，单击“Add”按钮，将资源文件添加到工程中。

成功跑起来 。。 。

Q2: Flutter ios 真机调试

最近公司用flutter开发一款app，像我这种从web转做移动端的人一直遇到不少坑，接下来就是记录flutter运行在ios端的过程。

我目前使用Xcode的版本是Version 12.3

1.先运行 flutter doctor 看有没有通过检查

2.在XcodePreferencesAccounts账户中登录开发者账号（开发者账号不明白的可以自行百度了解一下）

3.Xcode引入Flutter项目下的ios文件夹

4.双击左侧的RunnerTARGETS下的Runner里的Signing Capabilities 下的All 选择Team然后再设置 Bundle ldentitier (这个是包名)格式是可参考默认的名字来起 （一般格式为com.company.game，iOS里用于开发者证书）

5.真机连接Mac电脑（手机要点击信任，🔓并处于解锁状态）上图的第6步是要真机连接上电脑才能选择你的设备

6.选完设备后就运行，出现build success就证明成功了 安装好后在手机上有可能打不开，在手机的设置能用设备管理里信任就ok了

Q3: flutter与原生混编(iOS)

一、创建项目及配置

1，创建ios项目，同时在同一个根目录下创建flutter项目

flutter项目使用命令flutter create -t module xxxflutter项目名

如图

2，将flutter项目以pod的形式加入ios项目

2.1，如果项目之前没有用过pod，则pod init创建podfile

如果使用过，直接进行步骤2.2。

2.2，podfile中添加

flutter_application_path是flutter项目的路径

2.3，target中加入（一次性将flutter的编译产物由此依赖进入iOS项目中，可跳过步骤3）

3，配置脚本（已完成步骤2.3可进行步骤4）

打开ios项目，在Build Phases中左上角添加Run Script

4，设置bitcode

Flutter 目前还不支持 BitCode，需要设置为No

二、混编使以后添加的每个模块都以package形式，在module中pubspec.yaml文件中引用（基于内存消耗考虑）

1，页面跳转

原生处理：

flutter在iOS中的使用，主要是以FlutterViewController为载体，并在其内部采用FlutterEngine对视图进行渲染。

导入头文件：

flutter处理：

在module项目的main里

定义channel，名字与原生保持一致

2，数据传递

二者之间的数据传递iOS使用FlutterBasicMessageChannel类，flutter使用BasicMessageChannel类，用法与MethodChannel类似

原生处理：

接收数据：

发送数据：

flutter处理：

问题：

网上搜的方法，在podfile最前边加eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)句话

执行pod install失败

于是又搜了下别的文章，添加的第二句话为load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')，试了下成功了

Q4: 关于 FLutter显示原生视图 View（iOS 篇）并交互

① 创建原生视图，可提供外界调用的方法 / 属性等。

② 创建遵守 FlutterPlatformViewFactory协议的 NSObject class 类

③ 创建遵守 FlutterPlatformView 协议的 NSObject class 类

④ 在 Appdelegate 中注册

创建个通信 dart 文件

dart 文件中使用：

关于flutter调用iosview和Flutter调用原生framework的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。