`
kabike
  • 浏览: 608470 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

Flex的一点入门经验(7)--spark组件的滚动条

    博客分类:
  • flex
阅读更多
在原来的mx组件中,如果子元素大小超过了container的大小,是会出现滚动条的,
但是spark的组件默认情况下则让子元素超出了container的范围.
比如这个文件
  <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600">
	
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
		
	<s:VGroup width="200" height="100">
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
	</s:VGroup>
	
	<s:BorderContainer width="200" height="100">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
	</s:BorderContainer>
	
	<mx:VBox width="200" height="100" borderColor="red" borderStyle="solid">
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		
	</mx:VBox>
	
 </s:Application>
 

效果如下图


这时我们需要手动加上滚动条.对于group这样实现了IViewport的来说,直接用Scroller包装一下,
而对于skinnable Spark container,需要编写使用了滚动条的皮肤文件
 <s:Scroller width="200" height="100">
		
		<s:VGroup>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
		</s:VGroup>
	</s:Scroller>
	
	<s:BorderContainer width="200" height="100" skinClass="com.crap.skin.CrapSkin">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
	</s:BorderContainer>

CrapSkin.mxml内容为
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.BorderContainer")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>
	
	<s:Scroller height="100%" width="100%" top="1" left="1" right="1" bottom="1">    
		<s:Group id="contentGroup">
			<s:layout>
				<s:BasicLayout/>
			</s:layout>
		</s:Group>
	</s:Scroller>
	
	<s:Rect left="0" right="0" top="0" bottom="0">
		<s:stroke>
			<s:SolidColorStroke color="0x000000" weight="1"/>
		</s:stroke>
	</s:Rect>
</s:Skin>

最终效果为

分享到:
评论

相关推荐

    flex------组件-----数据可视化

    在这个“flex------组件-----数据可视化”主题中,我们将探讨Flex如何帮助开发者创建交互式的数据图表和可视化效果。 Flex框架提供了一套强大的组件库,其中包括用于数据可视化的类和库。这些组件使得开发人员能够...

    FLEX入门实例--------各种Effect的综合运用

    标题 "FLEX入门实例--------各种Effect的综合运用" 指的是一个介绍Adobe Flex中Effect使用的教程。Flex是一个开源框架,用于构建富互联网应用程序(RIA),它基于ActionScript和MXML语言。本教程可能着重于如何在...

    flex-messaging-core-4.7.3.jar

    flex-messaging-core-4.7.3.jar 最新版,下载了好长时间才下载下来,亲测可用!

    flex----组件---行为类与特效类

    在博文《flex----组件---行为类与特效类》中,作者可能详细介绍了如何在Flex项目中应用这些行为和特效,包括如何导入和使用预定义的MX Behaviors,如何创建自定义行为,以及如何通过EffectManager和Spark特效来实现...

    Flex 游戏入门级----------------位图切割,人物行走

    本教程将引导你入门 Flex 中的位图切割和人物行走动画的实现,这是许多2D游戏中的基本技术。 一、位图切割(Bitmap Data Cutting) 位图切割是将大的图像资源分割成多个小的、可独立操作的部分,这在游戏开发中...

    FLEX入门实例--------transition,state的综合运用

    本实例主要探讨的是FLEX中`transition`和`state`的综合应用,这两个特性是FLEX界面动态效果和组件状态管理的核心。 首先,让我们深入理解`transition`和`state`的概念: 1. **Transition(过渡效果)**: 过渡...

    FLEX入门篇--------《Training flex from source》E文版

    请下载part1 博文链接:https://hacker47.iteye.com/blog/182250

    spring-flex-1.5.0.M2-dist.zip

    在Spring Flex 1.5.0.M2中,核心组件`spring-flex-1.5.0.M2.jar`扮演了关键角色,它是Spring和Flex集成的核心库,提供了诸如消息代理、配置支持和Spring服务代理等功能。这个库使得Flex客户端可以轻松地调用Spring...

    flex----组件---数据验证类

    本篇文章将深入探讨Flex中的组件以及数据验证类,帮助你更好地理解和应用这些概念。 首先,Flex组件是构建用户界面的基本单元,它们可以是按钮、文本框、列表等可视化元素。在Flex中,组件主要由MXML和ActionScript...

    Flex Builder 4-7 -04

    FLEX开发工具。Flex Builder 4-7 win64 安装文件,第四卷。

    flex-tour-de-flex-component-explorer-1.2-308demo

    非常好DEMO参考,这个项目已经转到Apache名下了,最新的版本1.2,308个例子,已经全站打包,搜索:flex-tour-de-flex-component-explorer-1.2-308demo。开源代码http://flex.apache.org/download-tourdeflex.html

Global site tag (gtag.js) - Google Analytics