1

我的 Flex 应用程序中的容器的动态最小高度存在问题。

该应用程序由几个选项卡组成,每个选项卡都根据需要设置了自己的 minHeight 属性。但是,在一个选项卡中,我在两个视图之间切换 - 一个列表视图和一个详细视图。

主要观点:

<mx:TabNavigator id="tabNavigator" width="100%" height="100%" change="MainViewModel.getInstance().onTabClick(event);" resizeToContent="true">
        <s:NavigatorContent label="Welcome" minWidth="950" width="100%" minHeight="300" height="100%">
            <startview:StartView width="100%" height="100%" x="0" y="0" />
        </s:NavigatorContent>
        <s:NavigatorContent id="documentTab" minWidth="950" width="100%" minHeight="300" height="100%" label="Document">
            <documentview:DocumentView width="100%" x="0" y="0" visible="{model.documentList}" />
            <documentdetailview:DocumentDetailView width="100%" x="0" y="0" visible="{model.documentDetail} "/>
        </s:NavigatorContent>
</mx:TabNavigator>

在列表中,我有一列带有调用函数 setDocumentDetailView() 的“详细信息”链接:

public function setDocumentDetailView() : void {
    documentList = false; // the list is not displayed
    documentDetail = true; // the detail is displayed
}

在详细视图中,我有一个返回列表调用函数 setDocumentListView() 的按钮:

public function setDocumentListView() : void {
    documentList = true; // tje
    documentDetail = false;
    setDocumentDetailViewHeight(300);
}

到目前为止,它工作正常。

由于列表和细节的最小高度不同,出现了第一个问题。要显示垂直滚动条并显示特定视图的所有内容,必须设置 NavigatorContent id="documentTab" 的最小高度。这是在上面的函数中完成的。

由于详细信息取决于显示的文档,因此会出现更多问题。它由几个具有条件可见性的面板组成。因此,各种文档的最小高度是不同的(根据其类型以及文档文本的长度)。因此我需要根据内容确定minHeight,并相应地设置“documentTab”的minHeight。

我发现在呈现视图后调用的“updateComplete”事件。如果我得到包含所有条件面板的 VGroup 的高度值,则我需要为外部 NavigatorContent“documentTab”设置正确的高度。我将此高度传递给 MainModel 中设置选项卡的 minHeight 的函数。

public function onUpdateComplete(): void {
        if (MainViewModel.getInstance().documentDetail) {
            height = view.documentDetail.height;
            MainViewModel.getInstance().setDocumentDetailViewHeight(height);
        }
    }

这似乎也能正常工作。直到 ...

我最近发现,如果我遵循以下场景,它会失败:

  1. 显示文档列表。
  2. 显示文档 A 的详细信息。
  3. 返回列表。
  4. 显示相同的文档 A。

在这种情况下,不会重新渲染详细视图,因为显示的对象具有相同的高度和宽度。因此,updateComplete 事件没有被触发,minHeight 保持设置为 300(因为在上一步中设置了列表 minHeight)。详细信息中的面板越过外部“documentTab”并且不会出现滚动条。当我转到另一个具有相似内容的文档(可见相同的面板和相同的比例)时,也会出现相同的情况。

有没有人有针对这种情况的有效解决方案?

我什至已经尝试过“显示”事件来将高度设置为存储在属性中的值。但它没有用。更糟糕的是,它开始表现得非常奇怪,因为“height”变量的值只设置为比以前更大的值,但从未变小。当视图可能更小时,变量会保留以前大小的值。当视图需要更大的高度时,该变量会采用新的更高值。这导致在访问各种文档的详细信息并保持这个大高度的同时将视图永久调整为最大发现大小 - 为所有文档详细信息提供大量空白空间和滚动条。

我真的厌倦了 Flex 的这种不可预测的行为 :( 所以,如果有人知道我应该尝试什么来完成这项工作,我会非常高兴。

4

1 回答 1

0

我不确定这是否能解决您的问题,如果没有完整的代码很复杂,首先我建议您使用带有 View 堆栈的 tabBar,然后使用像这样的导航内容

<s:TabBar dataProvider="{myViewStack}" styleName="tabText" height="35"/>
   <mx:ViewStack id="myViewStack" paddingTop="0" width="100%" height="100%" resizeToContent="true" creationPolicy="all">    

        <!-- TAB 1-->                           
        <s:NavigatorContent id="familyTab" label="Familia" width="100%">
            <Code/>
        </s:NavigatorContent>

        <!-- TAB 2 -->
        <s:NavigatorContent id="subFamilyTab" label="SubFamilia" width="100%">
            <Code/>     
        </s:NavigatorContent>

    </mx:ViewStack>

我不明白为什么你需要 minHeigh evrything 是动态的,所以如果你在你的 2n 选项卡中使用 hgroup,我肯定 evrything 会很好用/heigh。如果您对滚动有问题,只需使用滚动标签

<s:NavigatorContent id="documentTab" minWidth="950" width="100%" minHeight="300" height="100%" label="Document">
<s:VGroup width=100% heigh=100%>
            <documentview:DocumentView width="100%" x="0" y="0" visible="{model.documentList}" />
            <documentdetailview:DocumentDetailView width="100%" x="0" y="0" visible="{model.documentDetail} "/>
</s:VGroup>
        </s:NavigatorContent>

在您在此 mxml 文件中使用的第一个组(vgroup 或 hgroup)上使用 s:scroller

于 2013-08-13T11:52:25.543 回答