Flex:更改组件

Question

嗨，我想创建一个灵活的网页。基本上，我在顶部有一些菜单栏项目，当我点击菜单栏中的一个下拉菜单时，组件会变成一个具有不同内容的页面。

我该怎么做呢？

谢谢。

Answer 1

在我看来，您想要的确切组件是TabNavigator (Adobe docs)。

它使用起来相当简单。TabNavigator组件的每个子组件表示一个内容选项卡页(请注意，子组件必须是容器，如Canvas或VBox)，子组件的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属性确定)，并使用TabBar组件来控制选定的索引。您想要做的仍然是使用相同的ViewStack来容纳所有页面，但是您需要一个下拉菜单项选择来为您更改selectedIndex。

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

像这样的东西应该会给你一个开始，希望评论能帮助你解释它。从那里你可以添加页面，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>