如何使用Flex Tile

最新推荐文章于 2017-05-10 15:37:05 发布

最新推荐文章于 2017-05-10 15:37:05 发布 · 179 阅读

文章标签：

#Flex #XML

Containers -- Visual Components -- Flex 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个简单的 Flex Tile 布局容器示例，展示了如何使用 TileContainer 将子元素排列成等大小网格的方式。通过设置方向、边距及间隙属性，实现了水平布局的按钮组。

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Tile layout container. -->
<!--
	如何使用Flex Tile
	MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel title="Tile Container Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Label width="100%" color="blue"
            text="A Tile container lays out its children in a grid of equal-sized cells."/>

        <mx:Tile direction="horizontal" borderStyle="inset" 
                horizontalGap="10" verticalGap="15" 
                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

            <mx:Button label="1" height="50" width="75"/>
            <mx:Button label="2" height="50" width="75"/>
            <mx:Button label="3" height="50" width="75"/>
            <mx:Button label="4" height="50" width="75"/>
            <mx:Button label="5" height="50" width="75"/>
            <mx:Button label="6" height="50" width="75"/>

        </mx:Tile>

    </mx:Panel>
</mx:Application>