[备忘] 基于UIComponent控件的滚动

小研究了一下基于 UIComponent的Scroller.

spark的滚动, 由spark.components.Scroller和IViewport接口配合的结果, GroupBase(Group的基类) 已经实现了IViewport, 所以所以的spark组件都已经自动可以和 Scroller配合.

但如果你是想基于很原始的(当然也是Flex中最轻量的) UIComponent做控件, 而且也想实现滚动条效果, 并且能和Scroller配合, 就需要做些工作了.

首先, 直观地看一下spark滚动条:

http://flex4fun.com/2010/11/30/flex4-scroller-viewpoint-part1/

其次, 再图文并茂地了解一下基本概念:

http://www.adobe.com/devnet/flex/articles/flex4_viewport_scrolling.html

有日本网站整理了一个英文的pdf: http://labs.taiga.jp/presentationMaterial/FxUG/FxUG12420100921Slide.pdf

最后, 看一下最核心的DisplayObject.scrollRect是做什么的?

http://gskinner.com/blog/archives/2006/11/understanding_d.html

看完了这三个链接, 我得出了下面的初步方案:

MyClass extends UIComponent implement IViewport

具体怎么实现 IViewport接口可以借鉴 GroupBase类和RichEditText类.

不过重还是要清楚两个概念:

1. contentWidth和contentHeight应该是控件的真实画布 size, 而不再是 unscaledWidth和unscaledHeight.
    而contentWidth和contentHeight的大小完全由内部需要来决定, 不再受到外部设定width和height的限制. 
    这也决定了  contentWidth 和 contentHeight 大小应该在 updateDisplayList 内设定.

2. Scroller控件会设置 viewport(就是实现了IViewPort接口的控件) 的 width,height和自身一样大小, 所以在 Scroller内的viewport就不要自行设置height, weight了. 也就是说 viewport的width和height就是可视面积.

具此, 我们调用 this.scrollRect = new Rectangle(this.horizontalScrollPosition, this.verticalScrollPosition, width, height);  就可以达到确定控件的可视范围.

smithfox | Tuesday 26 July 2011 at 3:56 pm | | UI       

One comment

Chanel iPhone 6 Plus Cases

It’s also worth mentioning that iOS 8.3 delivers a handful of security enhancements, something that’s important if you use your iPhone for virtually everything like I do.

Chanel iPhone 6 Plus Cases, (URL) - 23-04-’15 14:34
(optional field)
(optional field)
为阻止垃圾广告, 请在提交评论前, 回答一个简单问题(Please answer an simple question)
Remember personal info?
Notify
Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.