如何使用Flex Grid

最新推荐文章于 2025-01-17 22:57:52 发布

最新推荐文章于 2025-01-17 22:57:52 发布 · 119 阅读

文章标签：

#Flex #XML

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

18 篇文章

订阅专栏

本文展示了一个使用FlexGrid布局的简单示例，该示例创建了一个3x3的按钮网格容器，并介绍了如何设置按钮的位置及宽度。

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

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

        <mx:Label width="100%" color="blue" 
            text="A 3 by 3 Grid container of Button controls."/>

        <mx:Grid>
            <mx:GridRow>
                <mx:GridItem>
                    <mx:Button label="Row 1 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 1 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 1 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <mx:Button label="Row 2 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 2 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 2 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <mx:Button label="Row 3 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 3 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <mx:Button label="Row 3 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>
        </mx:Grid>

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