Laya 滚动组件--ScrollBar

问题:

  • laya中 list 等组件对vScrollBarSkin设置后才有滚动功能
  • laya中多少组件自带了滚动功能
  • 如果想要实现一个自带滚动功能的组件需要做什么处理

概述

laya中滚动功能组件:ScrollBar

ScrollBar 组件是一个滚动条组件。
当数据太多以至于显示区域无法容纳时,最终用户可以使用 ScrollBar 组件控制所显示的数据部分。
滚动条由四部分组成:两个箭头按钮、一个轨道和一个滑块。

ScrollBar使用

查找VScrollBar引用:


scrollbar引用

如上图所示,laya.ui 有多处引用(上图组件均自带了滚动功能)

查看laya源码
使用scrollbar步骤如下

  1. vScrollBarSkin set 方法中初始化 ScrollBar
  2. 监听ScrollBar的Event.CHANGE事件
  3. Event.CHANGE监听中,修改显示区域内容,进行重绘
  4. 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源码分析

...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容