问题:
- laya中
list
等组件对vScrollBarSkin
设置后才有滚动功能 - laya中多少组件自带了滚动功能
- 如果想要实现一个自带滚动功能的组件需要做什么处理
概述
laya中滚动功能组件:ScrollBar
ScrollBar 组件是一个滚动条组件。
当数据太多以至于显示区域无法容纳时,最终用户可以使用 ScrollBar 组件控制所显示的数据部分。
滚动条由四部分组成:两个箭头按钮、一个轨道和一个滑块。
ScrollBar使用
查找VScrollBar引用:
如上图所示,laya.ui 有多处引用(上图组件均自带了滚动功能)
查看laya源码
使用scrollbar步骤如下
- vScrollBarSkin
set
方法中初始化 ScrollBar- 监听ScrollBar的
Event.CHANGE
事件Event.CHANGE
监听中,修改显示区域内容,进行重绘destroy
对 ScrollBar进行销毁
TextArea.as 代码节选:
/**
* <code>TextArea</code> 类用于创建显示对象以显示和输入文本。
*/
public class TextArea extends TextInput {
...
override public function destroy(destroyChild:Boolean = true):void {
super.destroy(destroyChild);
_vScrollBar && _vScrollBar.destroy();
_vScrollBar = null;
}
/**垂直滚动条皮肤*/
public function get vScrollBarSkin():String {
return _vScrollBar ? _vScrollBar.skin : null;
}
public function set vScrollBarSkin(value:String):void {
if (_vScrollBar == null) {
addChild(_vScrollBar = new VScrollBar());
_vScrollBar.on(Event.CHANGE, this, onVBarChanged);
_vScrollBar.target = _tf;
callLater(changeScroll);
}
_vScrollBar.skin = value;
}
protected function onVBarChanged(e:Event):void {
if (_tf.scrollY != _vScrollBar.value) {
_tf.scrollY = _vScrollBar.value;
}
}
private function changeScroll():void {
var vShow:Boolean = _vScrollBar && _tf.maxScrollY > 0;
var hShow:Boolean = _hScrollBar && _tf.maxScrollX > 0;
var showWidth:Number = vShow ? _width - _vScrollBar.width : _width;
var showHeight:Number = hShow ? _height - _hScrollBar.height : _height;
var padding:Array = _tf.padding || Styles.labelPadding;
_tf.width = showWidth;
_tf.height = showHeight;
if (_vScrollBar) {
_vScrollBar.x = _width - _vScrollBar.width - padding[2];
_vScrollBar.y = padding[1];
_vScrollBar.height = _height - (hShow ? _hScrollBar.height : 0) - padding[1] - padding[3];
_vScrollBar.scrollSize = 1;
_vScrollBar.thumbPercent = showHeight / Math.max(_tf.textHeight, showHeight);
_vScrollBar.setScroll(1, _tf.maxScrollY, _tf.scrollY);
_vScrollBar.visible = vShow;
}
}
/**滚动到某个位置*/
public function scrollTo(y:Number):void {
commitMeasure();
_tf.scrollY = y;
}
}
ScrollBar源码分析
...