flutter原生定位,flutter调用原生

flutter跳转原生页面后的穿透问题

现象:

成都创新互联公司专注于企业网络营销推广、网站重做改版、莎车网站定制设计、自适应品牌网站建设、HTML5商城开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为莎车等各大城市提供网站开发制作服务。

flutter页面通过present跳转原生页面后,原生页面上的点击会首先响应下面的flutter页面中的内容(比如按钮什么的)。

这是flutter框架一直存在的一个bug。在github上有相关的issue。

原因推测:

推测是flutter对控制器(或者view)加了分类,重写了控制器的点击事件,用来计算是否在对应的点击位置有flutter响应事件。没有的话再扔出去点击事件。

解决方案1:

在原生控制器中,加入点击事件的几个方法的空实现,用以覆盖flutter框架中的实现:

-(void)touchesBegan:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesMoved:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesCancelled:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesEnded:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

让事件不被flutter截获即可。

解决方案2:

直接切换window的根控制器到原生控制器即可。别忘暂时保存flutter控制器。

在返回时再切换回flutter中。

解决方案3:

在flutter跳转到原生页面之前,在flutter中加上一个蒙层,用来隔绝手势往flutter下面的view传递。原生页面返回flutter时再移除这个蒙层。

Android原生和Flutter使用过程的差异对比(二)

1、常用布局的对比

使用下来其他组件大致还算方便,但是相对布局而言使用便利程度上Android原生完胜,ConstraintLayout内部的所有子View可以设置互相之间的位置依赖关系。

而Flutter的Stack组件内部的Children只能通过外层包裹 Align后 固定位置,比如 Alignment.topLeft、Alignment.bottomRight 等。遇到复杂的堆叠布局需要通过外层包裹 Positioned 组件后设置固定的 top 和 left 距离以达到效果,内部子组件之间无法设置位置关联关系。

2、一些常用属性设置上的差异:

Margin外边距

Android:直接在布局文件对View设置android:layout_marginStart、android:layout_marginTop

Flutter:需嵌套 Container 组件并在内部设置具体的 margin 值

Padding内边距

Android:TextView、ImageView、各种Layout都可以直接在属性上设置android:paddingStart

Flutter:需嵌套 Padding 组件并在内部设置具体的值

组件的可见性

Android:每个view都可以通过setVisibility来设置可见、隐藏或者隐藏但占位

Flutter:没有单独设置组件是否显示的api,只能通过 bool 值控制是否添加该组件

事件监听

Android:常规的setOnClickListener和setOnLongClickListener设置单击和长按事件

Flutter:在需要添加事件监听的组件外层嵌套 InkWell 或 GestureDetector 并设置 onTap 等

3、生命周期

Android:

Activity和Fragment各自有完整的生命周期链路onCreate、onStart、onResume、onPause、onDestroy等

Flutter:

万物皆组件,组件继承 WidgetsBindingObserver 并重写 didChangeAppLifecycleState 函数进行监听

退回桌面依次执行inactive 》= paused,此时界面不可见用户不可操作,从桌面重新进入app执行resumed,状态较少如需在某些条件下触发特定操作可能要找别的方案,比如发通知之类的

为什么说移动端的未来是Flutter?

Flutter是Google开发的新一代跨平台方案,Flutter可以实现写一份代码同时运行在iOS和Android设备上,并且提供很好的性能体验。Flutter使用Dart作为开发语言,这是一门简洁、强类型的编程语言。Flutter对于iOS和Android设备,提供了两套视觉库,可以针对不同的平台有不同的展示效果。

Flutter原本是为了解决Web开发中的一些问题,而开发的一套精简版Web框架,拥有独立的渲染引擎和开发语言,但后来逐渐演变为移动端开发框架。正是由于Dart当初的定位是为了替代JS成为Web框架,所以Dart的语法更接近于JS语法。例如定义对象构建方法,以及实例化对象的方式等。

在Google刚推出Flutter时,其发展很缓慢,终于在18年发布第一个Bate版之后迎来了爆发性增长,发布第一个Release版时增长速度更快。可以从Github上Star数据看出来这个增长的过程。在19年最新的Flutter 1.2版本中,已经开放Web支持的Beta版。

Flutter不仅仅提供了一套视觉库,在Flutter整体框架中包含各个层级阶段的库。例如实现一个游戏功能,上面一些游戏控件可以用上层视觉库,底层游戏可以直接基于Flutter的底层库进行开发,而不需要调用原生应用的底层库。Flutter的底层库是基于Open GL实现的,所以Open GL可以做的Flutter都可以。

为什么Flutter开发APP性能最接近原生,前端程序员请关注

Flutter是谷歌公司推出的跨终端的开发框架,支持Android、iOS和WEB终端。1.0版在2018年12月5日发布,目前的最新版本是1.5,它采用的开发语言是Dart,Dart也是谷歌开发的计算机编程语言,语法类似C,是编译型语言:

hello world例子,打印字符串“Hello World!”:

1、没有桥接层

React Native、Weex等技术都是跨终端的框架,然而性能跟原生App存在很大差距。这是由于它们的工作原理决定的:

React Native、Weex等技术多了一个桥接层,所以界面渲染会慢一些,由于UI渲染非常频繁,想要不卡顿,基本上比较难,性能和用户体验跟原生代码有差距。而这恰恰是Flutter的优势所在:

Dart可以被编译成不同平台的本地代码,让Flutter不通过桥接层直接跟平台通信,自然性能会快一些。

2、编译执行

JavaScript是解释执行的,Dart是编译执行的,性能谁好一目了然。

3、Flutter Engine虚拟机

Flutter是依靠Flutter Engine虚拟机在iOS和Android上运行的,Flutter Engine使用C/C++编写,开发人员通过Flutter框架直接和API在内部进行交互,所以具有输入低延迟和UI渲染高帧速率的特点。除了这特点之外,Flutter还提供了自己的小部件,Flutter小部件是使用从React获取灵感的现代框架构建的。 中心思想是您使用小部件构建UI。

窗口小部件根据其当前配置和状态描述了它们的视图。 当窗口小部件的状态发生更改时,窗口小部件会重建其描述,框架将根据前面的描述进行区分,以确定底层呈现树从一个状态转换到下一个状态所需的最小更改。可以直接在OS平台提供的画布上进行描绘,也就是一些核心类库直接放到虚拟机里面,调用起来更快。

从它的系统结构可以看出,类似安卓的ART(Android Run Time)虚拟机,同样采用AOT(Ahead of TIme)技术,会在APP安装时就编译成机器语言,不再解释执行,从而优化了APP运行的性能。

4、自带渲染引擎

Flutter使用谷歌自己的Skia渲染引擎,而Android系统自带Skia引擎,iOS平台上Flutter也会把Skia引擎打包到APP中,从而实现了高效渲染。而React Native通过桥接层访问原生UI,操作频繁就容易出性能问题。

综合所述,Flutter 是性能最接近原生代码 的一种开发框架,未来也会是构建谷歌Fuchsia应用的主要方式,前途不可限量,唯一的问题就是需要学习一门新的语言:Dart,而有Java或者C#语言基础的程序员会比较容易学习。

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”按钮,将资源文件添加到工程中。

成功跑起来 。。 。

Android原生和Flutter使用过程的差异对比(一)

1、界面搭建过程中各种大小单位

Android:通常采用dp设置View宽高(和px像素的换算关系是dp值 × density逻辑密度),sp设置字体大小(会随着系统字体设置的大小而改变)。

Flutter:没有具体的大小单位描述, 和尺寸相关的MediaQueryData类中较为重要的几个值如下:

(一)devicePixelRatio(设备像素比),对应Android中的density

(二)size.width和height,设备的逻辑像素宽高,并非绝对物理像素(例如iphone6的设备像素比是2,通过size获取到的逻辑像素宽高为375  ×  667,实际物理像素则为750 × 1334,即分辨率)

(三)textScaleFactor:单位逻辑像素字体像素数,默认为1,设置成1.5则字体变大50%,如果想让Text组件的字体大小不随系统设置的变化而变化,需将这个值设定成固定值1

UI适配解决方案:

1、采用ScreenUtil插件,初始化时候传入设计稿大小,当发现一屏显示的大小有差异时候采用插件提供的setWidth和setHeight来设置具体的宽高(会根据设计稿大小和实际设备逻辑像素宽高比进行缩放)。

2、TextButton、Text等按钮和文本组件,通过设置字体大小和内边距来控制整体的宽高,而非固定其宽高。

2、本地资源文件的引用方式

Android:图片通常存放在res/mipmap或res/drawable下,不同分辨率对应不同后缀名,如mipmap-hdpi、mipmap-xhdpi

Flutter:需在pubspec.yaml中配置,如下图所示

如果只配置父级目录例如(assets/images/common_status)则无法再存放不同尺寸的图片。不同尺寸的图片需建立对应的2.0x、3.0x目录后存放,设备在读取时候会自行根据分辨率去找对应的图片,弊端是每有一张图片就需在pubspec.yaml文件中声明这些图片


网站栏目:flutter原生定位,flutter调用原生
文章URL:http://cdiso.cn/article/dsgjisj.html

其他资讯