Skip to content

Style.ag

xu_whale edited this page Sep 7, 2020 · 1 revision

继承关系

Style

简介

样式

样式

API

keyboard(number offset)

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

收起键盘

watch(string var, function callback)

观察对象

ID(string id)

设置视图id

style(table style)

设置视图样式

subs(View subview)

添加子视图

subviews(View subview)

添加子视图

bind(function func)

绑定函数

alpha(number value)

设置视图透明度,范围 0 ~ 1

⚠️ 在iOS,当透明度小于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)

设置视图的圆角半径

cornerRadius(number radius, RectCorner corner)

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

⚠️ 不能与阴影连用

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

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

notClip(boolean noClip)

设置圆角后,是否切割,默认切割false;优化性能使用

⚠️ iOS空实现,仅Android可用,Android sdk1.5.0 默认切割子View。可以改用addCornerMask()绘制圆角遮罩

cornerRadius(number cornerRadius, Color maskColor, RectCorner corners)

以覆盖一张中间透明周边含有指定颜色圆角的图片的方式实现圆角效果

⚠️ 这是一种提高圆角切割性能的方案,对于子视图超出父视图显示的情况,不建议使用该方式。

gradientColor(Color startColor, Color endColor, boolean isVertical)

设置线性渐变色

gradientColor(Color startColor, Color endColor, GradientType type)

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

enabled(boolean usable)

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

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

onClick(function callback)

设置点击事件回调

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

onLongPress(function callback)

设置长按回调

取消焦点

anchorPoint(number x, number y)

锚点,动画作用的位置,从0~1的比例,在视图中对应位置

rotation(number rotate, boolean notAdding)

旋转视图

scale(number x, number y, boolean add)

缩放视图

⚠️ 参数c是iOS平台隐藏参数,默认不要传

translation(number x, number y, boolean add)

位移视图

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

重置Transform

移除视图上的帧动画

snapshot(string filename)

视图截屏

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

添加高斯模糊

⚠️ iOS有效,Android空实现

移除高斯模糊

⚠️ iOS有效,Android空实现

设置点击时的效果

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

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

bgImage(string imageName)

给视图设置背景图片

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

shadow(Size shadowOffset, number shadowRadius, number opacity)

设置视图阴影

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

onDetachedView(function callback)

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

开始画布动画(CanvasAnimation),不会影响布局

⚠️ 不可使用FrameAnimation和Animation

停止View里的画布动画

⚠️ 非画布动画不会停止

width(number size)

设置视图宽度

widthPercent(number sizePercent)

设置视图宽度百分比

maxWidth(number value)

设置最大宽度

minWidth(number value)

设置最小宽度

maxWidth(number value)

设置最大宽度

minWidth(number value)

设置最小宽度

height(number size)

设置视图高度

heightPercent(number sizePercent)

设置视图高度百分比

maxHeight(number value)

设置最大高度

minHeight(number value)

设置最小高度

maxHeight(number value)

设置最大高度

minHeight(number value)

设置最小高度

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

设置视图的外边距

top(number value)

设置视图的上外边距

left(number value)

设置视图的左外边距

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)

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

shrink(number value)

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

视图是否可见

text(string content)

设置文本内容

设置文字对齐方式,参见TextAlign

fontSize(number size)

设置字体大小

设置文字颜色

lines(number num)

设置展示的最大行数,默认只展示一行

⚠️ 0代表最大行数不限制。当lines传入0时,Label的BreakMode会强制改为Clipping切割模式

设置文字截断样式,参见BreakMode的枚举值

⚠️ 在多行情况下,当设置Start或Middle时,会强制改为Clipping切割模式

styleText(StyleString styleString)

设置富文本,详情参见StyleString

⚠️ iOS设置该属性会清空之前设置的属性

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

设置文字内容距边界距离

设置字体样式

fontNameSize(string name, number size)

设置自定义字体

包裹内容,即大小按照文本内容自适应, setWrapContent(true)与width(MeasurementType.WRAP_CONTENT) && height(MeasurementType.WRAP_CONTENT)等效

⚠️ 当label同时设置setWrapContent方法及width(10):height(10)的情况下,展示效果取决于设置的先后顺序。如:当label设置了setWrapContent(true)之后设置width(10):height(10),label宽度为10、高度为10;当设置width(10):height(10)固定宽高后设置WrapContent,即以setWrapContent设置为准

setLineSpacing(number spacing)

设置多行文本之间行间距

设置是否在文字上面和下面添加一点额外的padding

⚠️ 仅android有效,ios空实现

contentMode(ContentMode contentMode)

设置图片的填充模式

⚠️ 默认为SCALE_ASPECT_FIT,详情参见ContentMode;模式要在设置图片前设置,不建议动态修改

lazyLoad(boolean lazyLoad)

设置在滚动控件中,滚动时是否加载图片,默认为true不加载

⚠️ 该属性为Android端特性,iOS设置时无效果

startAnimationImages(table images, number during, boolean isRepeat)

开始播放图片的帧动画,支持本地及网络图片

停止播放图片的帧动画

是否正在播放图片帧动画

image(string url)

可以设置网络或本地图片

setImageUrl(string image, string holder)

设置图片及占位图

setCornerImage(string image, string holder, number corner, RectCorner direct)

设置图片及占位图,并且切割圆角

⚠️ 用于改善图片圆角切割带来的性能问题,多图片圆角推荐使用

setImageWithCallback(string image, string holder, function callback)

设置图片、占位图及回调

setNineImage(string image)

加载.9图

⚠️ Android为drawable目录下相对路径,无后缀,iOS需要使用带.9名称后缀图片

blurImage(number number, boolean bool)

设置ImageView高斯模糊效果

⚠️ iOS下为全ImageView模糊,提高效率,故需要ImageView设置填充模式

placeholder(string placeholder)

设置占位文字

placeholderColor(Color placeholderColor)

设置占位文字颜色

textColor(Color textColor)

设置文本颜色

fontSize(number fontSize)

设置文字大小

设置输入模式

passwordMode(boolean passwordMode)

设置密码模式

⚠️ 输入字符以*号显示,可正常获取输入内容,如需限制输入内容,可自行制定规则。(PS: 两端只有单行模式支持密码输入,iOS输入文本的情况下,切换为密码模式后初次输入会将光标置于行尾 )

returnMode(ReturnType returnMode)

设置键盘返回按钮模式,只在单行模式有效

textAlign(TextAlign textAlign)

设置文本对其方式

maxBytes(number maxBytes)

设置最大字节数

⚠️ 最大字节数,汉字两个字节,表情四个字节(组合表情占据4个以上字节),其他一个字节

maxLength(number maxLength)

设置最大字符数

返回最大字符数

text(string text)

设置文本内容

fontNameSize(string fontName, number fontSize)

设置字体及大小

单行模式

⚠️ 单行模式,需要先调用,再设置其他属性,否则可能导致展示异常

setBeginChangingCallback(function beginChangeCallback)

设置内容开始改变的回调

setDidChangingCallback(function didChangingCallback)

设置文字已经修改的回调

setEndChangedCallback(function endChangeCallback)

设置内容修改完毕的回调

setReturnCallback(function returnCallback)

设置点击键盘'Return'按钮的回调

设置文本是否可编辑

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

设置view的内边距

取消键盘显示

弹出键盘显示

setCursorColor(Color cursorColor)

设置光标颜色

设置主轴内对齐方式

设置交叉轴内对齐方式

wrap换行模式,设置多行的整体,在交叉轴内对齐方式

wrap(Wrap wrap)

主轴上,子View支持换行排列

wrap(Wrap wrap)

主轴上,子View支持换行排列

Clone this wiki locally