加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Flex: DataGroup 组件增加滚动条

发布时间:2020-12-15 01:36:55 所属栏目:百科 来源:网络整理
导读:本想用mx:List 实现一个联系人列表,无奈AS4不知怎改变List的默认白色 背景,折腾了很久,只有用s:DataGroup 实现,又发现没有滚动条,得自己实现。 ? Flex 4 Spark 滚动条(Scroller) Submitted by bill on Thu,04/15/2010 - 21:23 ? Spark容器的滚动条不像H

本想用mx:List 实现一个联系人列表,无奈AS4不知怎改变List的默认白色

背景,折腾了很久,只有用s:DataGroup 实现,又发现没有滚动条,得自己实现。

?

Flex 4 Spark 滚动条(Scroller)

? Spark容器的滚动条不像Halo一样会自动加载,它已被独立出来,需要我们自行设计。

? 一、使用滚动组件Scroller包含需要滚动的容器

? 二、对于List等基于列表的组件,Scroller已加到其skinclass中,需要的话,可以重写它们的skinclass来控制Scroller

?? 1、例如,Spark 容器 Group 和 DataGroup 都是轻量级的基本的构造块类。即便如此它们支持滚动,它们不会像 Halo 那样自动装配滚动条。Spark 提供底层 APIs 帮助手动为 Group 和 DataGroup 挂接滚动条-clipAndEnableScrolling,horizontalScrollPosition,verticalScrollPosition,contentWidth,contentHeight。但同样有一个组件简化了这一过程。将 Group 或 DataGroup 嵌入到 Scroller 中就可以了,Scroller 会处理挂接以及在必要时显示滚动条。

    <s:Scroller width="200">
        <s:Group>
           <s:layout>
               <s:HorizontalLayout gap="0" verticalAlign="justify"/>
           </s:layout>
           <s:Button label="one"/>
           <s:Button label="two"/>
           <s:Button label="three"/>
           <s:Button label="four"/>
           <s:Button label="five"/>
        </s:Group>
    </s:Scroller>

? 2、事实上,这正是其他Spark容器(如 List )实现滚动的具体过程。它们的皮肤中包含一个 contentGroupdataGroup ,并且被放置在Scroller中了。查看默认的List皮肤 (spark/skins/spark/ListSkin.mxml) 就会发现这一点。

...
<!--- The Scroller component to add scroll bars to the list. -->
<s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" 
                                    minViewportInset="1" focusEnabled="false">
    <!--- The container for the data items. -->
    <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
       <s:layout>
           <s:VerticalLayout gap="0" horizontalAlign="contentJustify" />
       </s:layout>
    </s:DataGroup>
</s:Scroller>
...
出处:http://flex4jiaocheng.com/blog/266

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读