视图组件 View
核心布局组件容器,默认不可以滚动。可以通过增加样式参数 overflow-y: scroll
切换为可以纵向滚动容器,或者增加样式参数 overflow-x: scroll
切换为水平滚动容器。
基础用法
点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
setup() {
// ...
},
});
</script>
<template>
<qt-view class="qt-view"> </qt-view>
</template>
属性
参数 | 描述 | 类型 |
---|---|---|
name | 元素标识 | string |
collapsable | 如果一个qt-view 只用于布局它的子组件,则它可能会为了优化而从原生布局树中移除。 把此属性设为 false 可以禁用这个优化,以确保对应视图在原生结构中存在。 | boolean |
opacity | 配置qt-view 的透明度,同时会影响子节点的透明度 | number |
overflow | 指定当子节点内容溢出其父级qt-view 容器时, 是否剪辑内容 | enum(visible, hidden) |
focusable | 允许使用遥控器触发 qt-view 的激活状态,改为 true 后使用遥控器将能触发 qt-view 的 @focus 事件 | boolean |
clipChildren | 设置是否将超出边界的子qt-view 切除 | boolean |
descendantFocusability | 设置焦点的分发方式,0为在后代元素前,1为在后代元素后,2为阻止分发 | number enum(0,1,2) |
duplicateParentState | 设置是否跟随父元素的状态而改变状态 | boolean |
bringFocusChildToFront | 设置是否将获得焦点的View放在最前面显示 | boolean |
dispatchChildFocusEvent | 设置是否发送子View获得焦点的事件,默认为true | boolean |
blockFocusDirections | 某个方向锁住焦点 | Array ['left', 'right', 'up', 'down'] |
gradientBackground | 设置渐变背景色,具体用法参考下面示例 | Object |
selected | 设置selected状态 | boolean |
nextFocusName | 按下媒体键下一个焦点的目标 | Map(left:'',right:'',up:'',down:'') |
focusScale | 焦点时放大倍数 | number |
useAdvancedFocusSearch | 可选的焦点搜索方式 | boolean |
enableFocusBorder | 是否激活焦点时选中边框,默认false | boolean |
*showOnState | 根据状态设置是否可见 | enum |
gradientBackground
点击查看gradient
showOnState
相应焦点状态时显示,三个状态一组使用。
normal
: string - 正常 ;focused
: string - 焦点 ;selected
: string - 选中,在ul
组件中生效,移出ul
时触发,如果不需要selected
状态,ul
标签中添加:enableSelectOnFocus="false"
;
事件
click
完整事件声明:click(event: QTViewEvent):void
当QTView
点击事件。
参数 | 描述 | 类型 | 非空 |
---|---|---|---|
event | 焦点事件 | QTViewEvent | 是 |
focus
完整事件声明:focus(event: QTViewEvent):void
当QTView
获得或者失去焦点事件。
参数 | 描述 | 类型 | 非空 |
---|---|---|---|
event | 焦点事件 | QTViewEvent | 是 |
接口
requestFocus
该方法用于请求焦点。
完整方法声明:function requestFocus(): void
参数
无返回值:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
无 | 无返回值 | void |
requestFocusDirectly
该方法用于直接请求焦点。
完整方法声明:function requestFocusDirectly(): void
参数
无返回值:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
无 | 无返回值 | void |
clearFocus
该方法用于清除焦点。
完整方法声明:function clearFocus(): void
参数
无返回值:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
无 | 无返回值 | void |
setVisibility
该方法用于设置显示状态。
完整方法声明:function setVisibility(visibility: QTIViewVisibility): void
- 参数
参数 | 描述 | 类型 | 非空 |
---|---|---|---|
visibility | 可见性 | QTIViewVisibility | 是 |
- 返回值:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
无 | 无返回值 | void |