apache-flex - 如何让剪辑内容在 mx TabNavigator 上工作？

Question

我有一个 TabNavigator，在此之前有一个带有 TabBar 的 ViewStack，它不会剪辑它的内容。它溢出边界或出现在位于屏幕下方的其他组件下方。有没有人遇到过这个？

这是我的代码：

<mx:VDividedBox width="300" height="100%">
    <mx:TabNavigator id="firstViewStack" 
                borderStyle="solid" 
                width="100%"
                height="100%"
                clipContent="true">


        <s:NavigatorContent id="content1" 
                                    label="ITEMS">
            <views:Items height="550" width="100%" />
        </s:NavigatorContent>


        <s:NavigatorContent id="eventsContent" label="ITEMS 2">
            <views:Items height="880" width="100%"/>
        </s:NavigatorContent>
    </mx:TabNavigator>
</mx:VDividedBox>

更新
我已经包含了一个我调整标签内容大小的动画 gif。如您所见，蒙版似乎是根据内容而不是可用区域调整大小？？？请注意，在调整大小时，选项卡导航器的边框沿大小重叠。

我将所有内容的最小高度设置为较低的值，并将所有内容的高度设置为 100%，因此它没有那么高，但您可以看到内容仍然没有被剪裁。

我也尝试过使用 VGroup 而不是 VDividedBox，这没关系。

这是另一个代码示例：

<s:VGroup top="50" left="50" width="400">
    <mx:TabNavigator width="100%" height="300">
        <s:NavigatorContent label="TAB">
            <s:Group width="100%" height="400">
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor color="#ff0000"/>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:NavigatorContent>
        <s:NavigatorContent label="TAB">
            <s:Group width="100%" height="400">
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor color="#0000ff"/>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:NavigatorContent>
    </mx:TabNavigator>
    <s:Button width="100%" label="HELLO WORLD"/>
    <s:Button width="100%" label="HELLO WORLD"/>
</s:VGroup>

Answer 1

我已经实现了 2 种方法——一种带有 Scroller，另一种带有 autosize。

这是一个例子

这是代码：

<?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" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600">

    <s:HGroup width="100%" height="100%" left="50" top="50">

        <!-- Using Scroller-->
        <s:VGroup width="400">

            <mx:TabNavigator width="100%" height="300">
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Scroller width="100%" height="100%">
                        <s:Group>
                            <s:Group width="100%" height="400">
                                <s:Rect width="100%" height="100%">
                                    <s:fill>
                                        <s:SolidColor color="#ff0000"/>
                                    </s:fill>
                                </s:Rect>
                            </s:Group>
                        </s:Group>  
                    </s:Scroller>

                </s:NavigatorContent>
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Scroller width="100%" height="100%">
                        <s:Group>
                            <s:Group width="100%" height="600">
                                <s:Rect width="100%" height="100%">
                                    <s:fill>
                                        <s:SolidColor color="#0000ff"/>
                                    </s:fill>
                                </s:Rect>
                            </s:Group>
                        </s:Group>  
                    </s:Scroller>
                </s:NavigatorContent>
            </mx:TabNavigator>

            <s:Button width="100%" label="HELLO WORLD"/>
            <s:Button width="100%" label="HELLO WORLD"/>
        </s:VGroup>

        <s:Spacer width="60"/>
        <!-- Using Autosize-->

        <s:VGroup top="50" left="50" width="400">

            <mx:TabNavigator width="100%" minHeight="300" resizeToContent="true" >
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Group width="100%" height="400">
                        <s:Rect width="100%" height="100%">
                            <s:fill>
                                <s:SolidColor color="#ff0000"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>

                </s:NavigatorContent>
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Group width="100%" height="500">
                        <s:Rect width="100%" height="100%">
                            <s:fill>
                                <s:SolidColor color="#0000ff"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>

                </s:NavigatorContent>
            </mx:TabNavigator>

            <s:Button width="100%" label="HELLO WORLD"/>
            <s:Button width="100%" label="HELLO WORLD"/>
        </s:VGroup>

    </s:HGroup>

</s:Application>