div

核心布局组件容器，默认不可以滚动。可以通过增加样式参数 overflow-y: scroll 切换为可以纵向滚动容器，或者增加样式参数 overflow-x: scroll 切换为水平滚动容器。

[范例：demo-div.vue]

属性

参数	描述	类型
name	元素标识	string
style	-	View Styles
collapsable	如果一个 View 只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除。 把此属性设为 false 可以禁用这个优化，以确保对应视图在原生结构中存在。	boolean
opacity	配置 View 的透明度，同时会影响子节点的透明度	number
overflow	指定当子节点内容溢出其父级 View 容器时, 是否剪辑内容	enum(visible, hidden)
focusable	允许使用遥控器触发 View 的激活状态，改为 true 后使用遥控器将能触发 div 的 @focus 事件	boolean
clipChildren	设置是否将超出边界的子View切除	boolean
descendantFocusability	设置焦点的分发方式,0为在后代元素前，1为在后代元素后，2为阻止分发	int
duplicateParentState	设置是否跟随父元素的状态而改变状态	boolean
bringFocusChildToFront	设置是否将获得焦点的View放在最前面显示	boolean
dispatchChildFocusEvent	设置是否发送子View获得焦点的事件，默认为true	boolean
*blockFocusDirections	当div内部寻焦为空时，是否拦截焦点	Array
*gradientBackground	div可设置渐变背景色，具体用法参考下面示例	Object
selected	div设置selected状态	boolean
nextFocusName	按下媒体键下一个焦点的目标	Map(left:'',right:'',up:'',down:'')
focusScale	焦点时放大倍数	number
useAdvancedFocusSearch	可选的焦点搜索方式	boolean
enableFocusBorder	是否激活焦点时选中边框，默认false	boolean
*showOnState	根据状态设置是否可见	enum

• blockFocusDirections中需传递一个Array，分别用up、down、left、right代表上下左右的方向：例如

点击查看源码

<div :blockFocusDirections="blockDirections"></div>

点击查看源码

blockDirections: ['left', 'right', 'up', 'down']

• gradientBackground [示例：div-gradient-bg.vue]

(colors: Array, cornerRadius: int, cornerRadii4: Array, cornerRadii8: Array, type: int, shape: int, orientation: int)

• colors: Array - 渐变颜色（#aarrggbb）；
• cornerRadius: int - 圆角；
• cornerRadii4: Array - 圆角 ([左上, 右上, 右下, 左下]) （cornerRadii8 同理）；
• type: int - 渐变类型；
• shape: int - 渐变形状；
• orientation: int - 渐变方向；

type的常用参数

参数	描述	类型
0	LINEAR_GRADIENT：线性渐变（默认）	int
1	RADIAL_GRADIENT：径向渐变	int
2	SWEEP_GRADIENT ：扫描渐变	int

shape的常用参数

参数	描述	类型
0	RECTANGLE：矩形，可以有圆角（默认）	int
1	OVAL：椭圆	int
2	LINE ：线型	int
3	RING ：圆环	int

orientation的常用参数

参数	描述	类型
0	TOP_BOTTOM：从上到下（默认）	int
1	TR_BL：从右上角到左下角	int
2	RIGHT_LEFT ：从右到左	int
3	BR_TL ：从右下角到左上角	int
4	BOTTOM_TOP：从下到上	int
5	BL_TR：从左下角到右上角	int
6	LEFT_RIGHT ：从左到右	int
7	TL_BR ：从左上角到右下角	int

点击查看源码

gradientBackground: {
    type: 0,   
    shape: 0,
    colors: ['#ff0000', '#00ff00'],
    cornerRadii4: [0, 5, 20, 0]
}

• showOnState 相应焦点状态时显示，三个状态一组使用。

• normal: string - 正常 ；
• focused: string - 焦点 ；
• selected: string - 选中，在ul组件中生效，移出ul时触发，如果不需要selected状态，ul标签中添加:enableSelectOnFocus="false" ；

方法

---

requestFocus

请求焦点

requestFocusDirectly

不跟随view ui task，直接请求焦点

requestChildFocusAtIndex

requestChildFocusAtIndex(index: number) => void 令指定Index的子节点请求焦点

clearFocus

清除焦点，同Android View的clearFocus

changeAlpha

changeAlpha(alpha: number) => void 设置alpha值0-1

layoutViewManual

兼容方法，一般情况下不需要使用。在某些特殊场景下可能希望手动刷新layout，可调用此方法

---

blockRootFocus

使用root节点，将全局寻焦屏蔽

unBlockRootFocus

解决root全局寻焦拦截

setBlockFocusDirectionsOnFail

setBlockFocusDirectionsOnFail(derections: array) => void 内部寻焦失败后会将焦点拦截。通过传递一个Array，分别用up、down、left、right代表上下左右的方向

changeDescendantFocusability

changeDescendantFocusability(focusability: enum) => void 设置group内部焦点分发策略

focusability 参数:

参数	描述	类型
beforeDescendants	先于内部	string
blockDescendants	拦截所有group内焦点	string
afterDescendants	后于内部	string

---

hasFocus

hasFocus(promise:function) 获取当前View是否有含有焦点

this.$refs.current.hasFocus().then((focus)=>{
    //focus为true或false
 })

isFocused

isFocused(promise:function) 获取当前View是否是focused状态

this.$refs.current.isFocused().then((focus)=>{
    //focus为true或false
 })

getLocationOnScreen

getLocationOnScreen(promise:function) 获取当前View在屏幕中的位置信息

this.$refs.current.getLocationOnScreen().then((data)=>{
    //data.left 
    //data.right
    //data.top
    //data.bottom
    //data.width
    //data.height
 })

事件

事件名称	描述	类型
layout	这个事件会在布局计算完成后立即调用一次，不过收到此事件时新的布局可能还没有在屏幕上呈现，尤其是一个布局动画正在进行中的时候。	Function
attachedToWindow	这个事件会在节点已经渲染并且添加到容器组件中触发，因为 ES 的渲染是异步的，这是很稳妥的执行后续操作的事件。	Function
focus	该事件在 focusable 置为 true 时触发，通过遥控方向键可以移动活动组件位置，事件回调带有 isFocused 参数用于标记激活和非激活状态	Function
*childFocus	当div中一个获得标签获得焦点后，将触发此事件	Function

• childFocus 事件具体参数可参考下列代码： [范例：focus-event.vue]

点击查看源码

event.child = {
    index:nativeEventParams.child.index,
    id:nativeEventParams.child.id,
    name:nativeEventParams.child.name,
    position:nativeEventParams.child.position,
  };
event.focused = {
    id:nativeEventParams.child.id,
    name:nativeEventParams.child.name,
};