Flex4 spark panel 布局

最新推荐文章于 2017-10-13 14:59:15 发布

原创最新推荐文章于 2017-10-13 14:59:15 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #XML #Blog

Flex 专栏收录该内容

316 篇文章

订阅专栏

本文介绍了一个使用Adobe Flex框架实现的动态布局切换示例。通过下拉列表选择不同的布局类型（垂直、水平或瓷砖布局），并实时应用于Spark Panel容器中。此示例展示了如何根据用户的选择动态更改UI布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/18/setting-the-layout-direction-on-a-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_layout_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <fx:Script>
        <![CDATA[
            import spark.layouts.supportClasses.LayoutBase;
            import mx.events.IndexChangedEvent;
            import spark.layouts.*;

            protected function dropDownList_selectionChanged(evt:IndexChangedEvent):void {
                var panelLayout:LayoutBase;
                switch (dropDownList.selectedItem) {
                    case "VerticalLayout":
                        panelLayout = new VerticalLayout();
                        break;
                    case "HorizontalLayout":
                        panelLayout = new HorizontalLayout();
                        break;
                    case "TileLayout":
                        var tileLayout:TileLayout = new TileLayout();
                        tileLayout.requestedColumnCount = 3;
                        panelLayout = tileLayout;
                        break;
                    default:
                        panelLayout = new BasicLayout();
                        break;
                }
                panel.layout = panelLayout;
            }
        ]]>
    </fx:Script>

    <mx:Form>
        <mx:FormItem label="layout:">
            <s:DropDownList id="dropDownList"
                    requiresSelection="true"
                    selectionChanged="dropDownList_selectionChanged(event);">
                <s:dataProvider>
                    <s:ArrayList>
                        <fx:String>VerticalLayout</fx:String>
                        <fx:String>HorizontalLayout</fx:String>
                        <fx:String>TileLayout</fx:String>
                    </s:ArrayList>
                </s:dataProvider>
            </s:DropDownList>
        </mx:FormItem>
    </mx:Form>

    <s:Panel id="panel"
            title="I'm a Spark Panel title"
            horizontalCenter="0"
            verticalCenter="0">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <s:Button label="One" />
        <s:Button label="Two" />
        <s:Button label="Three" />
        <s:Button label="Four" />
        <s:Button label="Five" />
    </s:Panel>

</s:Application>