Flex：改变组件

Question

您好，我想创建一个弹性网页。基本上，我在顶部有一些菜单项，当我单击菜单栏中的其中一个下拉菜单时，该组件将更改为具有不同内容的页面。

我该怎么做？

谢谢。

Answer 1

在我看来，您所追求的确切组件是 TabNavigator (Adobe docs)。

使用起来相当简单。 TabNavigator组件的每个child代表一个标签页的内容（注意child必须是Canvas或VBox等容器），child的label属性用来表示标签上的标签标签本身。

一个使用标签的非常简单的网站可能看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="100%" height="100%" pageTitle="My Website" />
    <mx:TabNavigator width="100%" height="100%">
        <mx:VBox width="100%" height="100%" label="Standard Page">
            <mx:Label text="Standard Page Title" fontWeight="bold"/>
            <mx:Text  width="100%" height="100%"
                text="Here is some page content." />
        </mx:VBox>

        <mx:VBox width="100%" height="100%" label="Image Gallery">
            <mx:Label text="Image Gallery Title" fontWeight="bold" />
            <mx:TileList width="100%" height="100%">
                <mx:Image source="my_image1.png" />
                <mx:Image source="my_image2.png" />
                <mx:Image source="my_image3.png" />
                <mx:Image source="my_image4.png" />
            </mx:TileList>
        </mx:VBox>
    </mx:TabNavigator>
</mx:Application>

您可以根据需要在TabNavigator 中堆叠任意数量的子容器组件，并且它们的内容（默认情况下）只有在您选择相关选项卡时才会加载。

如果您可以更具体地了解您正在尝试构建的内容，那么可能还有一些其他技巧适合您。希望这能给您一个开始。

编辑：好的，如果您改用下拉菜单，这是相同的概念，但涉及更多的体力劳动。

TabNavigator 组件使用ViewStack 组件（Adobe docs），它基本上是一堆内容页面，一次只显示一个（由堆栈的selectedIndex 属性确定），带有@ 987654334@ 组件来控制选定的索引。您想要做的仍然是使用同一个 ViewStack 来保存所有页面，但您希望下拉菜单项选择来为您更改 selectedIndex。

MenuBar 组件 (Adobe docs) 提供从 XMLListCollection 数据提供程序生成的下拉项。要处理项目选择，请将 itemClick 事件处理程序设置为 MenuBar，并根据选择的菜单项设置 ViewStack 的 selectedIndex 属性。

这样的事情应该给你一个开始，希望 cmets 帮助解释它。从那里您可以添加页面、MenuBar 项目等。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;

            /**
             * Handle the selection of a menu item.
             */
            private function menuItemClickHandler(event:MenuEvent):void
            {
                // Get the submenuitem node that was clicked
                var selection:XML = XML(event.item);
                // Depending on the label of the item that was clicked,
                // modify the selectedIndex property of the content ViewStack
                switch(selection.@label.toString())
                {
                case "Page 1":
                    pageStack.selectedIndex = 0;
                    break;

                case "Page 2":
                    pageStack.selectedIndex = 1;
                    break
                }
            }
        ]]>
    </mx:Script>

    <!-- Data provider collection for the menu bar -->
    <mx:XMLListCollection id="menuXLC">
        <mx:source>
            <mx:XMLList>
                <menuitem label="Content">
                    <submenuitem label="Page 1" />
                    <submenuitem label="Page 2" />
                </menuitem>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <!-- MenuBar to provide dropdown items -->
    <mx:MenuBar dataProvider="{menuXLC}" width="100%"
        labelField="@label"
        itemClick="menuItemClickHandler(event)" />

    <!-- ViewStack containing the various content pages -->
    <mx:ViewStack id="pageStack" width="100%" height="100%">
        <!-- Each of these child components represents a separate page of content.
             You should really define them in separate components. -->
        <mx:VBox id="contentPageOne" label="First Page" width="100%" height="100%">
            <mx:Label text="First Page Title" />
            <mx:Text text="First Page content." />
        </mx:VBox>

        <mx:VBox id="contentPageTwo" label="Second Page" width="100%" height="100%">
            <mx:Label text="Second Page Title" />
            <mx:Text text="Second Page content." />
        </mx:VBox>
    </mx:ViewStack>
</mx:Application>