adobe flex mobile 中的拆分视图

Question

我有四种观点： 1.SplitView（主视图） 2.SplitViewHomeView(根面板) 3.SimpleView（右侧面板） 4.Details（右面板视图的子项）。 我正在尝试像在 adobe flex mobile 中的 Ipad 中一样完成拆分视图。但无法将根面板连接到右侧面板...任何人都可以向我建议路径。我的代码如下

拆分视图 **

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
    <s:ViewNavigator id="MainView" left="0" width="300" height="748" firstView="views.SplitViewHomeView"/>
    <s:ViewNavigator id="MainView1" left="301" width="732" height="748" firstView="views.SimpleView"/>

</s:Application>

** 拆分视图主页视图 **

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Root View"
        creationComplete="srv.send()">
    <fx:Declarations>
        <s:HTTPService id="srv" url="assets/employees.xml"/>
    </fx:Declarations>
    <s:List id="list" top="0" bottom="0" left="0" right="0"
            dataProvider="{srv.lastResult.list.employee}">

        <s:itemRenderer>
            <fx:Component>
                <s:IconItemRenderer
                    label="{data.Name} {data.Founder}"
                    messageField="title"/>
            </fx:Component>

        </s:itemRenderer>
    </s:List>

</s:View>

** 简单视图 **

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Home View"
        creationComplete="srv.send()">
    <fx:Declarations>
        <s:HTTPService id="srv" url="assets/employees.xml"/>
    </fx:Declarations>
    <s:List id="list" top="0" bottom="0" left="0" right="0"
            dataProvider="{srv.lastResult.list.employee}"
            change="navigator.pushView(Details, list.selectedItem)">
        <s:itemRenderer>
            <fx:Component>
                <s:IconItemRenderer
                    label="{data.Name} {data.Founder}"
                    messageField="title"/>
            </fx:Component>
        </s:itemRenderer>
    </s:List>

** 详情查看 **

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        title="Details">

    <s:HGroup verticalAlign="middle" gap="12">
        <s:Image source="assets/pics/{data.picture}"/>
        <s:VGroup>

        </s:VGroup>
    </s:HGroup>
    <s:navigationContent>
        <s:Button label="Back" click="navigator.popToFirstView()"/>
    </s:navigationContent>


</s:View>

**

Answer 1

查看开源eskimo library

下载 zip 并查找 SplitViewApplication.as 或 SplitView.as 这些组件将完全满足您的需求。

干杯