Skip to content

View.ag

XiongFangyu edited this page Nov 25, 2020 · 3 revisions

继承关系

View

简介

所有视图的基类,提供通用方法

主要包含布局方法类(如宽高等设置),事件方法类(如点击事件等),渲染方法类(如背景色等),和生命周期方法

⚠️ 不支持构造函数

API

ID(string id)

设置视图id

style(table style)

设置视图样式

watch(string var, function callback)

观察数据修改,并回调;监听最后一个key的值变化(eg:若监听Model.data.key,则只有key值变化时才会回调)

watch(string var, WatchContext context, function callback)

观察数据修改,并回调;监听最后一个key的值变化(eg:若监听Model.data.key,则只有key值变化时才会回调)

watch(string var, function filterFunc, function callback)

观察数据修改,并回调;监听最后一个key的值变化(eg:若监听Model.data.key,则只有key值变化时才会回调)

width(number size)

设置视图宽度

获取视图宽度

设置视图宽度自适应

widthPercent(number sizePercent)

设置视图宽度占父视图百分比

获取视图宽度占父视图百分比

maxWidth(number value)

设置最大宽度

获取最大宽度

minWidth(number value)

设置最小宽度

获取最小宽度

height(number size)

设置视图高度

获取视图高度

设置视图高度自适应

heightPercent(number sizePercent)

设置视图高度百分比

获取视图高度

maxHeight(number value)

设置最大高度

获取最大高度

minHeight(number value)

设置最小高度

获取最小高度

margin(number top, number right, number bottom, number left)

设置视图的外边距

top(number value)

设置视图的上外边距

top()

获取视图的上外边距

left(number value)

设置视图的左外边距

left()

获取视图的左外边距

bottom(number value)

设置视图的下外边距

获取视图的下外边距

right(number value)

设置视图的右外边距

获取视图的右外边距

padding(number top, number right, number bottom, number left)

设置视图的内边距

paddingTop(number value)

设置视图的上内边距

获取视图的上内边距

paddingLeft(number value)

设置视图的左内边距

获取视图的左内边距

paddingBottom(number value)

设置视图的下内边距

获取视图的下内边距

paddingRight(number value)

设置视图的右内边距

获取视图的右内边距

设置位置的类型

获取位置的类型

positionTop(number value)

设置视图的上边位置

获取视图的上边位置

positionLeft(number value)

设置视图的左边位置

获取视图的左边位置

positionBottom(number value)

设置视图的下边位置

获取视图的下边位置

positionRight(number value)

设置视图的右边位置

获取视图的右边位置

设置视图在交叉轴上对齐方式

获取视图在交叉轴上对齐方式

basis(number value)

设置视图在主轴上的默认大小

获取视图在主轴上的默认大小

grow(number value)

视图在主轴上剩余空间的填充值

grow()

获取视图在主轴上剩余空间的填充值

shrink(number value)

父级没有剩余空间,则此元素的收缩因子

获取此视图的收缩因子

视图是否可见

获取视图是否可见

hidden(boolean value)

视图是否隐藏

获取视图是否隐藏

返回该视图的父视图对象

从父视图中移除自身

alpha(number value)

设置视图透明度,取值范围[0,1]

⚠️ 在iOS,当透明度小于0.1之后,将无法响应事件

获取视图透明度,取值范围[0,1]

borderWidth(number value)

设置视图的边框宽度

获取视图的边框宽度值

设置视图的边框颜色

borderColor(number red, number green, number blue, number alpha)

设置视图的边框颜色

borderColor(number hex, number alpha)

设置视图的边框颜色

获取视图的边框颜色

bgColor(Color color)

设置视图的背景颜色

bgColor(number red, number green, number blue, number alpha)

设置视图的背景颜色

bgColor(number hex, number alpha)

设置视图的背景颜色

获取视图的背景颜色

cornerRadius(number radius)

设置视图的圆角半径,取值范围[0,∞)

⚠️ 不能与阴影连用 当设置的半径值超过视图自身宽|高一半时,会自动将半径处理为视图自身宽|高一半

获取视图的圆角半径,默认返回左上角

cornerRadius(number radius, RectCorner corner)

设置圆角半径,根据不同的位置

⚠️ 不能与阴影连用 当设置的半径值超过视图自身宽|高一半时,会自动将半径处理为视图自身宽|高一半

根据不同的方向获取视图圆角半径

设置子视图是否在view的边界内绘制

⚠️ clipToChildren只能对parent使用,parent会遍历子View,让所有子View都统一clip。 注:parent自己不生效,需要调用parent的parent才行。

cornerRadius(number cornerRadius, Color maskColor, RectCorner corners)

以覆盖一张中间透明周边含有指定颜色圆角的图片的方式实现圆角效果,性能最高,但使用场景限制性强

⚠️ 这是一种提高圆角切割性能的方案(Android/iOS端都是),但是使用场景限制性强,当背景不是纯色,或含有透明度时,达不到预期效果。 其他情况下,建议使用看效果是否达到预期。

gradientColor(Color startColor, Color endColor, boolean isVertical)

设置线性渐变色

gradientColor(Color startColor, Color endColor, GradientType type)

设置线性渐变色,支持正向反向

添加高斯模糊

⚠️ iOS有效,Android无效

移除高斯模糊

⚠️ iOS有效,Android无效

bgImage(string imageName)

给视图设置背景图片

⚠️ 背景图片只支持本地资源

shadow(number offsetX, number offsetY, number shadowRadius, number opacity)

设置视图阴影

⚠️ 1.cornerRadius+Shadow 使用时: 2)Android 给子View使用Shadow,子View不能充满容器,否则阴影被Parent切割 2.setCornerRadiusWithDirection 禁止与Shadow连用; 3.阴影的View有Z轴高度,会遮挡没有Z轴高度的同层View

anchorPoint(number x, number y)

锚点,动画作用的位置,取值范围[0,1]

rotation(number rotate, boolean add)

旋转视图

scale(number x, number y, boolean add)

缩放视图

translation(number x, number y, boolean add)

位移视图

⚠️ 参数c是iOS隐藏属性,默认不要传

重置旋转、缩放和位移值

设置点击时的效果

⚠️ Android上为波纹效果,iOS上是一种灰色高亮

enabled(boolean usable)

设置当前视图是否可以响应用户的点击,触摸等交互事件

⚠️ 该属性关闭后,不仅会导致自身无法响应事件,而且子视图也无法响应事件。所以当业务中遇到某些控件无法响应,可以考虑是否是自身或父视图禁用了用户交互。

获取当前视图是否可以响应用户的点击,触摸等交互事件

onClick(function callback)

设置点击事件回调

⚠️ iOS采用的是手势监听,所以要注意事件冲突,在冲突时可使用touchEnd方法

onLongPress(function callback)

设置长按回调

touchBegin(function callback)

触摸开始的回调

touchMove(function callback)

触摸移动中的回调

⚠️ 该回调会在移动中多次调用

touchEnd(function callback)

触摸结束后的回调

⚠️ 该坐标是手指抬起时的坐标

touchCancel(function callback)

触摸取消的回调

⚠️ 该回调在用户移出当前视图时会调用

scaleBegin(function callback)

设置缩放手势回调,当设置后,视图会处理两指缩放手势,并在开始时回调

scaling(function callback)

设置缩放手势回调,当设置后,视图会处理两指缩放手势,并在缩放时回调

scaleEnd(function callback)

设置缩放手势回调,当设置后,视图会处理两指缩放手势,并在缩放结束时回调

notDispatch(boolean notDispatch)

设置是否拦截手势

获取是否拦截

willPushCallback(function callback)

页面将要push的回调

didPushCallback(function callback)

页面push完成的回调

willPopCallback(function callback)

页面将要pop的回调

didPopCallback(function callback)

页面pop完成的回调

onDetachedView(function callback)

子视图从父视图移除时的回调

keyboard(number offset)

对目标view位移,让其位于键盘上方。

keyboard(number offset, string id)

当前焦点id的view上移,让其位于键盘上方。

收起键盘

convertPointTo(View otherView, Point point)

将自身某点的坐标换算到参考视图的坐标中

convertPointFrom(View otherView, Point point)

将参考视图的点坐标换算到自身的坐标中

获取是否有焦点

判断是否能获取焦点

获取焦点

取消焦点

snapshot(string filename)

视图截屏

⚠️ 请在界面绘制完毕后,再进行截图操作

设置是否开启点击收起键盘功能

Clone this wiki locally