Question

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

我该怎么做？

感谢。

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），它基本上是一堆内容页面，其中一次只显示一个（由堆栈的{{1确定）使用selectedIndex组件来控制所选索引。您想要做的仍然是使用相同的ViewStack来保存所有页面，但是您需要一个下拉菜单项选择来为您更改selectedIndex。

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

这样的事情应该给你一个开始，希望这些评论有助于解释它。从那里你可以添加页面，MenuBar项目等。

itemClick

Flex：更改组件

1 个答案: