flutter小部件开发,flutter 常用组件-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

flutter小部件开发,flutter 常用组件

Flutter开发-屏蔽Widget的多点触控行为

在Flutter中我们在 Widget 实现一些手势交互通常会使用 GestureDetector 装饰器来实现,但是默认情况下, widget 是支持多点触控,但是在一些特定需求下,我们不需要多点触控的操作,或者多点触控反而给一些功能带来麻烦,而且比较不方便的是,多点触控无法通过操作 widget 或者 GestureDetector 来屏蔽掉。查阅了官方文档发现的这个玩意: RawGestureDetector

在青羊等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站建设、成都网站设计 网站设计制作按需策划,公司网站建设,企业网站建设,高端网站设计,全网整合营销推广,成都外贸网站建设,青羊网站建设费用合理。

大概意思是:一个小部件,用于检测由给定手势工厂描述的手势。对于常用手势,请使用GestureRecognizer。 RawGestureDetector主要在开发自己的手势识别器时很有用。

例如:

我们可以通过RawGestureDetector来自定义手势。

有时,你可能需要禁用多点触摸或在Flutter应用程序中点击小部件。 例如,有一个列表,并且一次只能单击其中一项。 您不希望用户同时用三个手指点击或触摸并立即选择三个项。基本上,您要防止用户多次点击或多点触摸。

我们先创建一个简单的页面,页面加载一个 ListView.builder() ,

这个列表上的cell都支持多点触控,效果图:

【图】

Flutter允许在 GestureRecognizer 基类的帮助下创建自定义手势识别器小部件。 该类已经有两个抽象的实现,可以实现多次轻击和单次轻击手势。

首先创建一个自定义窗口小部件,以使其子窗口小部件只能具有单一触摸手势。

在 build() 方法中,我们将返回仅支持单点触摸手势的手势检测器小部件。 因此,我们为此创建另一个名为 _SingleTouchRecognizer 的类

现在我们回到我们的 SingleTouchRecognizerWidget 中,通过 RawGestureDetector 装饰器来定义我们刚才创建的单击手势检测器:

现在, build() 方法返回了一个 RawGestureDetector ,该 RawGestureDetector 处理 _SingleTouchRecognizer 类中的手势。接下来,我们需要在识别器类中实现这些方法。我们首先覆盖 GestureRecognizer 的 addAllowedPointer 方法。

在这里, startTrackingPointer 方法注册了将由识别器处理的相关事件。 然后, resolve() 负责确保是否允许继续进行触摸事件。

如果我们传入 GestureDisposition.rejected ,则当前的触摸事件无法处理。 因此,此触摸事件将被传递并允许其继续。 但是,如果传递了 GestureDisposition.accepted ,则将解析触摸事件,并且不会再调用其他事件。

通过handleEvent函数重置控制变量_p的值。

这样就完成了_SingleTouchRecognizer类的实现。

现在,只需要将该 Widget 包裹在想要支持单点触控的 widget 外层即可。

参考文献:

disable-multi-touch-on-a-widget-in-flutter

api.flutter.dev

Flutter小部件之图片(Image)和图标(Icon)

在Flutter中,我们可以使用Image控件来显示图片,一般来讲我们的图片资源都来源于网络或者本地图片。

Flutter中的Image也是类似。

我们先来看看Image的构造方法

下面我们来看看其常用的属性

可以看到,其常用属性跟前端中的css很像。

下面我们来简单用一用Image控件

首先是必填参数image,它接收一个ImageProvider类型的值。ImageProvider是一个抽象类,他下面有下图这些实现类,由下面这些实现类可以看出,image是可以从资源,内存,网络,和文件中获取图片。

我们先来试试加载网络图片

首先看看NetworkImage构造方法,很简单,传个url就可以了

如下:

嗯,就是这么简单。其他3种情况使用也是类似的,自行看源码即可。

实际上,Flutter给我们提供了扩展方法,使用起来更加简单,通常我们直接使用提供的扩展方法即可

如下

可以看到,他们的构造方法基本类似。

所以我们也可以这样写,跟上面的效果是一致的。

大致分为一下几步

1.创建一个文件夹,用于存放图片,如图,我创建了一个imgs的文件夹,放了一张图片

2.在pubspec.yaml中声明资源,注意声明的时候路径和前面的-是有间隔的,不然的话会报#/properties/flutter/properties/assets: type: wanted [array] got -imgs/code.png

类似的错误,声明完成后点击右上方的packages get

下面我们再来看看其他属性。

width,height

宽高没什么好说的,就是设置宽度和高度

配合color使用,用于设置颜色的混合模式。BlendMode是一个枚举,他有很多值

详细解析还是看官方文档吧,值太多了,我们随便用用

用于设置图片的填充方式,当图片本身小于设置的宽高或者比父控件的宽高小时,我们可以设置该属性控制图片的显示。

其值的类型是BoxFit。是个枚举

具体含义还是直接看文档即可

设置图片的对齐方式,接收一个Alignment类型的值,值如下,很好理解

为了方便看效果我们在外边套了个Container,简单的把它理解为一个容器布局就可以了,类似于html中的div或android中的Layout,我们给Container设置了宽高和背景颜色。

bottomLeft效果如下,其他的自行尝试

相对于Image,ICON可以像web一样使用字体图标,并且可以使用矢量图,无需担心失真的问题,并且体积相对较小。

我们先来看看其构造方法

很简单,我们直接来用一用

默认情况下,pubspec.yaml中uses-material-design的值为true.我们默认就可以使用Material Design字体图标

为什么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 + V8/JsCore开发小程序引擎(一)

众所周知,小程序是由HTML标签来开发原生组件,那么首先需要将HTML做解析,这里我们将HTML通过node脚本解析成JSON字符串,再用Dart来解析JSON,映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果,后续再详细介绍。

为了高效解析,直接用flutter的组件名在HTML文件上开发

直接使用flutter的组件

模仿微信小程序的Api,cc对应是微信小程序的wx

以上HTML中的例子

《使用Flutter + V8/JsCore开发小程序引擎(二)》

《使用Flutter + V8/JsCore开发小程序引擎(三)》


网站名称:flutter小部件开发,flutter 常用组件
网页URL:http://kswsj.cn/article/dsshdjp.html

其他资讯