flex 组件学习.docx
- 文档编号:29903322
- 上传时间:2023-08-03
- 格式:DOCX
- 页数:38
- 大小:49.93KB
flex 组件学习.docx
《flex 组件学习.docx》由会员分享,可在线阅读,更多相关《flex 组件学习.docx(38页珍藏版)》请在冰豆网上搜索。
flex组件学习
1.DataGrid组件样式属性
backgroundColor背景色
backgroundAlpha背景色透明度数值从0.00~1.00
alternatingItemColors间隔背景颜色间隔项的颜色这个属性要设置2个色彩,某一项的背景色和下一项的背景色
headerColors标题头背景渐变颜色这个属性要设置2个色彩,标题头背景渐变起始色和
标题头背景渐变结束色
horizontalGridLines是否显示横向分隔线是否显示每一行之间的横向分隔线truefalse
horizontalGridLineColor横向分隔线颜色horizontalGridLines为true时有效
verticalGridLines是否显示垂直方向分隔线是否显示每一行之间的横向分隔线truefalse
此属性只对内容中的分隔线有效,标题头的分隔线是默认的
verticalGridLineColor垂直方向分隔线颜色verticalGridLineColor为true时有效
useRollOver是否实现鼠标经过时的变化效果truefalse
rollOverColor鼠标经过一行时的本行背景色useRollOver为true时有效
textRollOverColor鼠标经过一行时的本行文字颜色useRollOver为true时有效(这个属性好像无效?
)
color文字颜色
textSelectedColor被选中行的文字颜色(这个属性好像无效?
)
selectionColor被选中行的背景颜色
textIndent每一行文字缩进距离数值从0~30
2.Tree组件样式属性
backgroundColor背景色
backgroundAlpha背景色透明度数值从0.00~1.00
alternatingItemColors间隔行的颜色这个属性设置2个色彩,某一行的背景色和下一行的背景色
depthColors树级结构中每级的背景色这个属性可设置多个色彩,中间以逗号分隔。
对应
从树的顶级到最后一级每1级的背景色。
设置此属性会覆盖
alternatingItemColors中的设置
useRollOver是否使用鼠标经过每一行时的效果truefalse
rollOverColor鼠标经过每一行时的背景色useRollOver为true时有效
textRollOverColor鼠标经过每一行时的文字颜色useRollOver为true时有效
borderThickness边框的粗细数值从0~20
color文本颜色
selectionColor被选中行的背景色
textSelectedColor被选中行的文本颜色
textIndent文字缩进值文字相对于图标的缩进值从0~50
indentation每一层级相对于上一层级的缩进值从0~50
openDuration打开和关闭本层内容的速度从0~1000
selectionDuration被选中层级的背景色渐变速度从0~3000
3.使用容器控制界面布局
一、管理程序的布局
容器类组件都位于mx.containers包中。
Container类是UIComponent的子类,是所有Flex容器类的父类,每个容器类都在它的基础上添加自己的功能。
1.1控制Application的布局
Application是一个特殊的容器,位于界面元素的根部,包含了整个程序的所有元素。
layout:
值为absolute时,horizontalAlign水平对齐和verticalAlign垂直对齐不起作用,界面上的元素将由各自的坐标决定。
值为vertical或horizontal时,元素的位置由horizontalAlign和verticalAlign控制。
width长,height高。
决定SWF文件的尺寸。
我们可以设置如下的属性,所有组件公有:
horizontalGap水平间距
vericalGap垂直间距
paddingTop顶部边距
paddingLeft左边距
paddingRight右边距
paddingBottom底边距
Constraintlayout约束布局,只能在layout属性值为absolute才能使用,具有这一特性的容器有:
Application、Canvas、Panel和Panel的子类TitleWingdow
点击元素得到如下界面:
如果对某一组件使用了约束布局,它会被强制定位在相应的位置,设置的X,Y坐标会失效。
ApplicationContolBar是和Application相关的一个容器,通常用来提供全局导航。
有水平(默认)和垂直方向选择。
它的dock属性,表示是否强行停靠在Application的顶部。
默认false,被当作一个普通的组件。
true,始终在顶部,宽度为100%。
Xml代码
1.
xml version="1.0" encoding="utf-8"?
>
2. Application xmlns: mx=" 3.layout="absolute" horizontalAlign="left" verticalAlign="top" height="100%" width="100%" 4. horizontalGap="0" verticalGap="0" paddingTop="0"> 5. Button label="Button1" height="120" x="24" y="0"/> 6. Button label="Button2" top="0" bottom="30" width="72" horizontalCenter="-72"/> 7. Button label="Button3" width="240" x="168" y="0"/> 8. ApplicationControlBar dock="true"> 9. Label text="这里是顶部导航" width="93" height="20"/> 10. ApplicationControlBar> 11. Application> xmlversion="1.0"encoding="utf-8"? > Applicationxmlns: mx=" layout="absolute"horizontalAlign="left"verticalAlign="top"height="100%"width="100%" horizontalGap="0"verticalGap="0"paddingTop="0"> Buttonlabel="Button1"height="120"x="24"y="0"/> Buttonlabel="Button2"top="0"bottom="30"width="72"horizontalCenter="-72"/> Buttonlabel="Button3"width="240"x="168"y="0"/> ApplicationControlBardock="true"> Labeltext="这里是顶部导航"width="93"height="20"/> ApplicationControlBar> Application> 1.2Canvas Canvas直接继承自Container,体积小,使用灵活。 在它里面的元素只能由X,Y来定位。 如果元素超出Canvas的区域范围,Canvas会自动增加滚动条。 每个容器默认情况下都会自动带滚动条。 可以通过horizontalScrollPolicy和verticalScrollPolicy的属性值来控制,on/off/auto。 在AS中对应ScrollPolicy.ON,ScrollPolicy.OFF,ScrollPolicy.AUTO。 1.3VBox和HBox VBox和HBox都是Box的子类,和Canvas相比,Box对子级元素采取规则的布局方式,其中VBox内的元素垂直方向分布,而HBox水平方向分布。 通过horizontalAlign和verticalAlign控制容器内的元素对齐方式。 Xml代码 1. xml version="1.0" encoding="utf-8"? > 2. Application xmlns: mx=" layout="absolute"> 3. HBox x="27" y="30" width="50%" height="50%" horizontalAlign="left" 4. verticalAlign="middle"> 5. Button label="Button"/> 6. Label text="这是一个HBox"/> 7. HBox> 8. VBox width="50%" x="263" y="30" height="100%"> 9. Label text="这是一个VBox"/> 10. Button label="Button"/> 11. VBox> 12. Application> xmlversion="1.0"encoding="utf-8"? > Applicationxmlns: mx="layout="absolute"> HBoxx="27"y="30"width="50%"height="50%"horizontalAlign="left" verticalAlign="middle"> Buttonlabel="Button"/> Labeltext="这是一个HBox"/> HBox> VBoxwidth="50%"x="263"y="30"height="100%"> Labeltext="这是一个VBox"/> Buttonlabel="Button"/> VBox> Application> 1.4用DividedBox分割界面 DividedBox继承自Box类,它有两个子类: HDividedBox和VDividedBox。 类似于HBox和VBox,多了在子级元素之间增加了可以拖动的分割块。 拖动分割块可以动态的调整分割块附近元素的长宽。 borderStyle是组件的样式之一,表示边框样式,默认: none,表示无边框。 solid为实心线条。 liveDragging: true表示在拖动时,在松开鼠标后,调整位置。 false拖动时调整。 Xml代码 1. xml version="1.0" encoding="utf-8"? > 2. Application xmlns: mx=" layout="absolute"> 3. HDividedBox width="90%" height="90%" liveDragging="false" borderStyle="solid" 4. x="10" y="10"> 5. Canvas width="200" height="246"> 6. Label x="33" y="10" text="一个Canvas容器"/> 7. Canvas> 8. HBox width="50%" height="50%"> 9. Label text="HBox容器" width="140"/> 10. HBox width="50%" height="50%"> 11. Label text="HBox内的HBox" width="140"/> 12. HBox> 13. HBox> 14. HDividedBox> 15. Application> 二、窗口布局 Panel组件就是这样一个窗口组件,它直接继承Container。 和它的子类TitleWindow都具有窗口程序的特点: 有标题条,可以放置其他内容,形成一个整体。 2.1Panel组件 fontSize表示字体大小,默认是10.一般中文12显示较清晰。 title表示窗口的标题。 ControBarPanel的一个容器,位置不可调整总是在底部,布局模式跟HBox相同。 可以放置按钮等组件。 Xml代码 1. xml version="1.0" encoding="utf-8"? > 2. Application xmlns: mx=" layout="absolute"> 3. Panel x="53" y="49" width="302" height="254" layout="horizontal" title="这里是标题" 4. fontSize="12"> 5. Label text="这里放置其它内容"/> 6. ControlBar height="24" paddingBottom="0" paddingTop="0" 7.horizontalAlign="right"> 8. Button label="其他控制"/> 9. ControlBar> 10. Panel> 11. Application> xmlversion="1.0"encoding="utf-8"? > Applicationxmlns: mx="layout="absolute"> Panelx="53"y="49"width="302"height="254"layout="horizontal"title="这里是标题" fontSize="12"> Labeltext="这里放置其它内容"/> ControlBarheight="24"paddingBottom="0"paddingTop="0" horizontalAlign="right"> Buttonlabel="其他控制"/> ControlBar> Panel> Application> 为窗口添加关闭按钮: Xml代码 1. xml version="1.0" encoding="utf-8"? > 2. Canvas width ="300" height="300" xmlns: mx=" 3. Script> 4. [CDATA[ 5. //点击关闭按钮时触发该函数 6. internal function doClose(): void{ 7. visible = false; 8. } 9. ]]> 10. Script> 11. Panel width ="100%" height="100%" layout="absolute" title="这里是标题" 12.fontSize="12"> 13. Label text="这里放置其它内容" x="0" y="0"/> 14. ControlBar height="24" paddingBottom="0" paddingTop="0" horizontalAlign="right" 15. x="0" y="230"> 16. Button label="其他控制"/> 17. ControlBar> 18. Panel> 19. Canvas width="40" height="24" top = "4" right="10"> 20. Button label="X" width="30" x="10" click = "doClose()"/> 21. Canvas> 22. Canvas> xmlversion="1.0"encoding="utf-8"? > Canvaswidth="300"height="300"xmlns: mx=" Script> [CDATA[ //点击关闭按钮时触发该函数 internalfunctiondoClose(): void{ visible=false; } ]]> Script> Panelwidth="100%"height="100%"layout="absolute"title="这里是标题" fontSize="12"> Labeltext="这里放置其它内容"x="0"y="0"/> ControlBarheight="24"paddingBottom="0"paddingTop="0"horizontalAlign="right" x="0"y="230"> Buttonlabel="其他控制"/> ControlBar> Panel> Canvaswidth="40"height="24"top="4"right="10"> Buttonlabel="X"width="30"x="10"click="doClose()"/> Canvas> Canvas> 将上面的代码保存为MXML,然后使用下面的代码new一个实例出来: Xml代码 1. xml version="1.0" encoding="utf-8"? > 2. --这里我们使用了命名空间,将主程序目录下所有的对象归到“tree”标记下--> 3. Application xmlns: mx=" layout="absolute" 4. xmlns: tree= "*"> 5. Panel2 x="54" y="24"> 6. Panel2> 7. Application> xmlversion="1.0"encoding="utf-8"? > --这里我们使用了命名空间,将主程序目录下所有的对象归到“tree”标记下--> Applicationxmlns: mx="layout="absolute" xmlns: tree="*"> Panel2x="54"y="24"> Panel2> Application> Application的applicationComplete事件会在主程序初始化后被触发。 接下来为窗口实现拖动功能,使用PopUpManager这个对象弹出Panel窗口,窗口将置于最上层,被称为Pop-Up弹出窗口。 Xml代码 1. xml version="1.0" encoding="utf-8"? > 2. Application xmlns: mx=" layout="absolute" 3.applicationComplete ="initApp()"> 4. Script> 5. [CDATA[ 6. //导入类 7. import mx.managers.PopUpManager; 8. import mx.managers.PopUpManagerChildList 9. //导入Panel对象 10. import mx.containers.Panel; 11. //初始化函数 12. internal function initApp(): void{ 13. var win: Panel = new Panel(); 14. wi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- flex 组件学习 组件 学习
![提示](https://static.bdocx.com/images/bang_tan.gif)