Question

我的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>

在列表中，我有一个带有“detail”链接的列，调用函数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);
        }
    }

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

我最近发现，如果我按照以下方案失败：

显示文件清单。
显示文件A。
返回列表。
显示相同的文件A.

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

有没有人有这种情况的工作解决方案？

我已经尝试过“show”事件来将高度设置为存储在属性中的值。但它没有用。更糟糕的是，它开始表现得很奇怪，因为“高度”变量的值只设置为比以前更大的值，但从不变小。当视图可以更小时，变量保持前一个大小的值。当视图需要更大的高度时，变量获得了更高的值。这导致将视图永久调整为最大发现大小，同时访问各种文档的详细信息并保持这么高的高度 - 所有文档详细信息都有大量空白空间和滚动条。

我对Flex的这种不可预测的行为感到非常厌倦:(所以，如果有人知道我应该尝试做些什么，我会非常高兴。

Answer 1

我不确定这是否能解决您的问题，如果没有完整的代码很复杂，首先我建议您使用带有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将与良好/高度。如果滚动有问题，请使用滚动标记

<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

Flex中容器问题的动态minHeight

1 个答案: