惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

有赞技术团队
有赞技术团队
MyScale Blog
MyScale Blog
The Hacker News
The Hacker News
Google DeepMind News
Google DeepMind News
The Cloudflare Blog
GbyAI
GbyAI
Vercel News
Vercel News
量子位
Apple Machine Learning Research
Apple Machine Learning Research
Recent Announcements
Recent Announcements
美团技术团队
D
DataBreaches.Net
H
Help Net Security
大猫的无限游戏
大猫的无限游戏
人人都是产品经理
人人都是产品经理
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
B
Blog RSS Feed
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Y
Y Combinator Blog
S
Secure Thoughts
S
SegmentFault 最新的问题
The Last Watchdog
The Last Watchdog
Jina AI
Jina AI
Security Archives - TechRepublic
Security Archives - TechRepublic
F
Fortinet All Blogs
C
Check Point Blog
小众软件
小众软件
阮一峰的网络日志
阮一峰的网络日志
Schneier on Security
Schneier on Security
MongoDB | Blog
MongoDB | Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Stack Overflow Blog
Stack Overflow Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Hacker News: Ask HN
Hacker News: Ask HN
博客园 - 【当耐特】
Simon Willison's Weblog
Simon Willison's Weblog
Scott Helme
Scott Helme
S
Security @ Cisco Blogs
SecWiki News
SecWiki News
Hugging Face - Blog
Hugging Face - Blog
博客园 - 叶小钗
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Google Online Security Blog
Google Online Security Blog
S
Securelist
L
LINUX DO - 最新话题
Forbes - Security
Forbes - Security
D
Darknet – Hacking Tools, Hacker News & Cyber Security
I
InfoQ
Engineering at Meta
Engineering at Meta

博客园 - Kenshin.L

[Flex]flex-htmlfilter swc complete [Flex]Adobe BrowserLabe [Flex]构建基于Flex技术的Blog程序(一) [Flex]Flex Ioc Framework - Parsley [Flex]用编程的方式来写CSS - LESS的应用(一) [Flex]Flex SDK 4(Gumbo)浅析ASDoc - ASDoc MXML应用篇 [Flex]Flex SDK 4(Gumbo)自定义皮肤 - SilverGreen(Spark) 下载 [Flex]Flex SDK 4(Gumbo)浅析ASDoc - ASDoc Tags参数篇 [Flex]Flex SDK 4(Gumbo)浅析ASDoc - Flash Builder 4配置篇 [Flex]Flex SDK 4(Gumbo)自定义皮肤 - SilverGreen(Spark和Halo)预览版 [Flex]Flex SDK 4(Gumbo)浅析SDK 4默认的Spark样式与Halo样式 [Flex]Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(三) [Flex]Flex SDK 4(Gumbo)改善的Layout和Scroller(二) [Flex]Flex编程注意之直接获取某个组件的对象(this[]用法) [Flex]Flex编程注意之自动获取焦点、监听全局键盘事件 [Flex]Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(二) [Flex]Flash Builder 4 编辑器配色方案 - 黑色系 [Flex]Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(一) [RIA]HTML5怎么就成了RIA“杀手”?
[Flex]Flex SDK 4(Gumbo)改善的Layout和Scroller(一)
Kenshin.L · 2009-07-15 · via 博客园 - Kenshin.L

详细请看:http://www.k-zone.cn/zblog/post/flex-gumbo-layout-scroller-1.html
Flex SDK 4(Gumbo)
在布局(Layout)和可视区域(Scroller)上面与Flex SDK 3还是有些差异性的,如果用户不了解这些差异性,会在实际相中出现奇怪的问题。
因此我们需要深入了解一下Flex SDK 4(Gumbo)的布局方式(Layout)和可视区域(Scroller)的事情。

本篇文章描述的内容是布局(Layout
Flex SDK 4(Gumbo)spark组件库里面增加了一个page:spark.layouts。
其中包括了比较重要的四个布局class,分别是:BasicLayout、HorizontalLayout、TileLayout、VerticalLayout

1、BasicLayout:(默认属性,当不指定定位后,则是绝对定位布局)
这是spark组件默认Flex SDK 3的布局方式,即绝对定位布局。
Flex SDK 3 里面对应的是:layout="absolute"
具体效果请看截图:

2、HorizontalLayout
这是spark组件库里面的水平布局方式。
在里面对应的是:layout="horizontal"
具体效果请看截图:

3、VerticalLayout
这是spark组件库里面的竖直布局方式。
Flex SDK 3 里面对应的是:layout="vertical"
具体效果请看截图:

4、TileLayout
这是spark组件库新增的布局方式,即格子布局方式。
TileLayout布局方式可以说是HorizontalLayout和VerticalLayout结合的方式。
具体效果请看截图:

还有一点是需要注意的:
paddingLeft、paddingRight、paddingTop、paddingBottom
这四个属性已经转移到了HorizontalLayout、VerticalLayout里面。这点也与Flex SDK 3有些区别。
也就是说,在spark组件中的容器,已经不具备paddingLeft、paddingRight、paddingTop、paddingBottom属性了。

关于如何使用布局功能:
<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/halo" 
      width="100%" height="100%">

      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
      </s:layout>
................................................................................

上面的布局解释为:
1、在s:Application下面的布局方式。
2、s:VerticalLayout指定为垂直布局。

如果将<s:layout>.....</s:layout>定义在某个容器里面,那么就是针对于某个容器而定义的布局。

例如:
<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/halo" 
      width="100%" height="100%">

      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
      </s:layout>

      <s:Panel width="400" height="400" title="Panle">

      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
      </s:layout>
................................................................................

附录:Flex SDK 4(Gumbo) spark组件中比较常见的容器)
1、Group:
相当于Canvas、默认是BasicLayout方式)
2、HGroup:
相当于HBox,因此只有一种布局方式:HorizontalLayout布局。
3、VGroup:
相当于VBox,因此只有一种布局方式:VerticalLayout布局。
4、Panel:
Flex SDK 3的Panel在作用上是一样的,默认布局方式是BasicLayout布局。