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>

** SplitViewHomeView **

<?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>

** DetailsView控件 **

<?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 这些组件将完全符合您的要求。

干杯

在adobe flex mobile中拆分视图

1 个答案: