View

View组件的功能和 div 相同，作为其他组件的容器。

基础用法

注意：

必须设置宽（width）高（height）属性
背景颜色建议设置为透明，background-color: transparent;

焦点事件

监听focus事件。

const onFocus = (e) => {
  //判断是否获得焦点
  const focused = e.isFocused;
}

是否可获得焦点：focusable
是否显示焦点框：enableFocusBorder
焦点变形倍数：focusScale

点击事件

监听click事件。

const onClick = (e) => {
  //
}

注意：组件必须获得了焦点，点击才生效。

背景色

使用 background-color设置背景颜色，点击查看颜色

注意：不支持 background 属性

焦点背景色

使用focus-background-color设置焦点状态背景颜色，点击查看颜色

渐变背景色

使用gradientBackground设置渐变颜色，点击查看gradient

注意：背景颜色需要设置为透明 background-color: transparent;

背景图片

暂时不支持

可以通过嵌套<qt-image>来实现背景图片

边框

正常状态：

边框颜色：border-color
边框宽度：border-width
边框圆角：border-radius

焦点状态

边框颜色：focus-border-width
边框宽度：focus-border-color
边框圆角：focus-border-radius

API

Attributes

Name	Description	Type	Default
focusable	是否可以获得焦点	`boolean`	false
clipChildren	裁剪子布局	`boolean`	false
clipPadding	从padding区域向外裁剪	`boolean`	false
enableFocusBorder	是否显示焦点框	`boolean`	false
focusScale	焦点放大倍数	`number`	1.1
duplicateParentState	继承父类的状态	`boolean`	false
showOnState	在指定状态显示	`enum`	normal
backgroundColorStr 2.87	以字符串形式指定的背景色	`string`	-
nextFocusDownSID 2.7	向下时指定下一个焦点sid	`string`	-
nextFocusUpSID 2.7	向上时指定下一个焦点sid	`string`	-
nextFocusLeftSID 2.7	向左时指定下一个焦点sid	`string`	-
nextFocusRightSID 2.7	向右时指定下一个焦点sid	`string`	-
nextFocusSID 2.7	指定各方向下一个焦点sid	`object`	-
sid 2.7	给一个元素标记一个`string id`，可随意赋值，需确保唯一	`string`	-
scrollOverride 2.7	当`parent`是`qt-list`等列表时，可以覆写各方向获焦时滚动的值	`object`	-
skipRequestFocus 2.7	忽略组件内自动寻焦（例如聚焦元素丢焦时）	`boolean`	false
fadingEdgeLength 2.5	淡出效果长度	`number`	0
horizontalFadingEdgeEnabled 2.5	开启横向淡出效果	`boolean`	false
verticalFadingEdgeEnabled 2.5	开启纵向淡出效果	`boolean`	false
autofocus 2.7	组件内根据状态（`初始化、可见性改变、尺寸改变`)变化自动获焦,focusable为true时自己获焦	`boolean`	false
renderToHardwareTextureAndroid	设置`layerType`为`LAYER_TYPE_HARDWARE`	`boolean`	false
viewLayerType	设置`layerType`	`enum`	-
clipBounds	设置裁剪区域	`object`	-
descendantFocusability	设置子孙组件的可聚焦性策略	`enum`	-
name	指定元素的`name`	`string`	-
nextFocusName	指定各方向下一个焦点元素的`name`	`object`	-
bringFocusChildToFront	是否自动将获焦元素绘制在顶层	`boolean`	false
dispatchChildFocusEvent	发送子元素焦点事件	`boolean`	false
selected	选择状态	`boolean`	false
visible	是否可见	`boolean`	false
visibility	可见性	`enum`	visible
size virtual dom组件中使用	设置元素大小	`array`	-
layout virtual dom组件中使用	设置元素位置及大小	`array`	-
showDialog 2.87	以dialog形式展示或隐藏，`焦点`会自动保存、恢复	`boolean`	-
interceptAllKeys	阻止元素内所有key事件	`boolean`	false
enableOverScrollY 2.87	开启获焦时纵向自动滚动	`boolean`	false
enableOverScrollX 2.87	开启获焦时横向自动滚动	`boolean`	false
selectChildPosition 2.87	设置选中子元素位置	`number`	-1
enableSelectOnFocus 2.87	开启当焦点时自动设置选中子元素位置	`number`	-1
focusMemory	开启子元素焦点记忆	`boolean`	false
gradientBackground	设置渐变背景色	`object`	false
listenHasFocusChange	开启hasFocus事件监听	`boolean`	false
shakeSelf	开启焦点终止时抖动	`boolean`	false

Events

Name	Description	Type
layout	当元素挂载或者布局改变的时候调用。	`Function`
focus	焦点变化事件	`Function`
click	点击事件	`Function`
select	选择事件	`Function`
interceptKeyEvent	使用`interceptAllKeys`时回调	`Function`
childFocus	子元素焦点变化时回调	`Function`

Exposes

Method	Description	Type
requestFocus	请求焦点	`Function`
requestChildFocus	请求孩子焦点	`Function`
clearFocus	清除焦点	`Function`
requestFocusDirectly	直接请求焦点	`Function`
setVisibility	设置是否可见	`Function`
requestRootLayout	请求根节点重新布局	`Function`
requestLayout	请求重新布局	`Function`
setDescendantFocusability	改变子元素获焦策略	`Function`
changeDescendantFocusability	改变子元素获焦策略	`Function`
forceUpdateRenderNode	强制刷新渲染节点	`Function`
setBackGroundColor	设置背景色	`Function`
layoutViewManual	手动布局界面	`Function`
blockRootFocus	阻塞焦点	`Function`
unBlockRootFocus	取消阻塞焦点	`Function`
changeAlpha	设置alpha	`Function`
setScale	设置形变	`Function`
setPosition	设置位置	`Function`
updateLayout	改变布局	`Function`
invalidate	刷新布局	`Function`
dispatchFunctionForTarget	调用目标的方法	`Function`
setBlockFocusDirections	设置阻塞焦点的方向	`Function`
setBlockFocusDirectionsOnFail	失败的时候设置阻塞焦点的方向	`Function`
setInitFocus	设置初始焦点	`Function`
setAutoFocus	设置自动焦点	`Function`
enabledAutofocus	设置自动焦点是否可用	`Function`
requestAutofocus	请求自动焦点	`Function`
hasFocus	是否有焦点	`Function`
isFocused	是否获得了焦点	`Function`
getLocationOnScreen	获取在屏幕上的位置	`Function`
getViewState	获取视图的状态	`Function`
getChildViewState	获取孩子视图的状态	`Function`
changeVisibility	设置可见性	`Function`
requestChildFocusAtIndex	请求`index`值子元素焦点	`Function`
clearMemoryFocused	清除记忆的焦点	`Function`

Source

Component • Docs

Contributors

Swiper Slide

Text

View #

基础用法 #

焦点事件 #

点击事件 #

背景色 #

焦点背景色 #

渐变背景色 #

背景图片 #

边框 #

API #

Attributes #

Events #

Exposes #

Source #

Contributors #