Flex HGroup
介紹
HGroup容器是使用HorizontalLayout類的Group容器。使用HGroup類的屬性來修改HorizontalLayout類的特性。
類聲明
以下是 spark.components.HGroup 類的聲明:
public class HGroup extends Group
公共屬性
| S.N. | 屬性和描述 |
|---|---|
| 1 | firstIndexInView:int [只讀]作為布局的一部分并在布局目標的滾動矩形內(nèi)的第一個布局元素的索引，如果還沒有顯示，則為-1。 |
| 2 | gap:int 布局元素之間的垂直間距(以像素為單位)。 |
| 3 | horizontalAlign:String 布局元素的水平對齊。 |
| 4 | lastIndexInView:int [只讀]作為布局和容器滾動矩形內(nèi)的一部分的最后一行的索引，如果還沒有顯示，則為-1。 |
| 5 | paddingBottom:Number 容器底部邊緣和最后一個布局元素的底部邊緣之間的像素數(shù)。 |
| 6 | paddingLeft:Number 容器的左邊緣和布局元素的左邊緣之間的最小像素數(shù)。 |
| 7 | paddingRight:Number 容器的右邊緣和布局元素的右邊緣之間的最小像素數(shù)。 |
| 8 | paddingTop:Number 容器的頂部邊緣和第一個布局元素的頂部邊緣之間的像素數(shù)。 |
| 9 | requestedMaxRowCount:int 此布局的測量高度足夠大以顯示至多requestedMaxRowCount布局元素。 |
| 10 | requestedMinRowCount:int 此布局的測量高度足夠大，以至少顯示requestedMinRowCount布局元素。 |
| 11 | requestedRowCount:int 此布局的測量大小足夠高，以顯示第一個requestedRowCount布局元素。 |
| 12 | rowCount:int [只讀]當前可見元素的數(shù)量。 |
| 13 | rowHeight:Number 如果variableRowHeight為false，則此屬性指定每個子項的實際高度(以像素為單位)。 |
| 14 | variableRowHeight:Boolean 指定是否為布局元素分配其首選高度。 |
| 15 | verticalAlign:String 內(nèi)容相對于容器高度的垂直對齊。 |
公共方法
| S.N. | 方法和描述 |
|---|---|
| 1 | HGroup() 構造函數(shù)。 |
繼承的方法
此類繼承以下類中的方法:
spark.components.Group
Spark.components.supportClasses.GroupBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object
Flex HGroup示例
讓我們按照以下步驟通過創(chuàng)建測試應用程序來檢查Flex應用程序中HGroup的使用:
| 步驟 | 描述 |
|---|---|
| 1 | 在 Flex - 創(chuàng)建應用程序章節(jié)中所述，在包 com.tutorialspoint.client 下創(chuàng)建名為 HelloWorld 的項目。 |
| 2 | 修改 HelloWorld.mxml ，如下所述。 保持文件的其余部分不變。 |
| 3 | 編譯并運行應用程序，以確保業(yè)務邏輯按照要求工作。 |
以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的內(nèi)容。
<?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"
width="100%" height="100%" minWidth="500" minHeight="500"
>
<fx:Style source="/com/tutorialspoint/client/Style.css"/>
<fx:Script>
<![CDATA[
private function applyVGroupProperties():void
{
mainHGroup.paddingTop = padTopH.value;
mainHGroup.paddingLeft = padLeftH.value;
mainHGroup.paddingRight = padRightH.value;
mainHGroup.paddingBottom = padBottomH.value;
mainHGroup.gap = gapH.value;
}
]]>
</fx:Script>
<s:BorderContainer width="630" height="480" id="mainContainer"
styleName="container">
<s:VGroup width="100%" height="100%" gap="50"
horizontalAlign="center" verticalAlign="middle">
<s:Label id="lblHeader" text="Layout Panels Demonstration"
fontSize="40" color="0x777777" styleName="heading"/>
<s:Panel id="hGroupPanel" title="Using HGroup"
width="500" height="300" includeInLayout="true" visible="true">
<s:layout>
<s:HorizontalLayout gap="10" verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<s:VGroup top="10" left="15">
<s:HGroup verticalAlign="middle">
<s:Label text="Gap:" width="100"/>
<s:NumericStepper id="gapH" maximum="400"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="Padding Top:" width="100"/>
<s:NumericStepper id="padTopH" maximum="400"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="Padding Left:" width="100"/>
<s:NumericStepper id="padLeftH" maximum="400"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="Padding Right:" width="100"/>
<s:NumericStepper id="padRightH" maximum="400"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="Padding Bottom:" width="100"/>
<s:NumericStepper id="padBottomH" maximum="400"/>
</s:HGroup>
<s:Button label="Apply Properties"
click="applyVGroupProperties()"/>
</s:VGroup>
<s:HGroup left="300" top="25" id="mainHGroup">
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>
準備好所有更改后，讓我們以正常模式編譯和運行應用程序，就像在 Flex - 創(chuàng)建應用程序中一樣 章節(jié)。 如果一切順利，您的應用程序，這將產(chǎn)生以下結果:[在線試用]
更多建議：