2013-04-30 23 views
0

我有一個TabNavigator,在此之前有一個TabBar的ViewStack不會剪輯它的內容。它流過邊界或出現在位於屏幕下方的其他組件下方。有沒有人遇到過這個?如何讓剪輯內容在mx TabNavigator上工作?

這裏是我的代碼:

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

Content correctly clipped Content not clipped

UPDATE
我包括我的gif動畫縮放選項卡的內容。正如你所看到的,這個面具的尺寸看上去與內容大小有關,而不是可用面積?注意調整大小時,標籤導航器沿着大小的邊界重疊。

我將所有內容的最小高度設置爲在所有內容上將值和高度降低到100%,因此它不會很高,但您可以看到內容仍未被剪切。

我也嘗試過使用VGroup而不是VDividedBox,這並不重要。

enter image description here

下面是另一個代碼例如:

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

enter image description here

+0

能告訴你這個問題的屏幕截圖?目前尚不清楚應該做什麼。 – Anton 2013-04-30 21:48:58

+0

我添加了一些截圖。請注意,左側圖像中的內容未被剪裁,並且位於右側。 – 2013-05-01 00:37:47

+0

我有一個圍繞它的VDividedBox。我更新了代碼。有時候,如果我將底部的選項卡拉起來,則會將內容剪輯爲正確的第二張圖像。但是,如果內容很長,它可能仍會出現在底部選項卡組下方的頁面下方。 – 2013-05-01 00:51:42

回答

1

我已實施2層的方法 - 一個具有滾輪和另一自動調整大小。

這裏是一個example

下面是代碼:

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

注意:在某些選項卡中,我將minHeight設置爲400,但未設置高度。除非我將高度設置爲100%,否則滾動條不會一直剪輯。 – 2013-05-07 15:15:25

+0

我會檢查我並給你我的答案。謝謝 – Anton 2013-05-07 18:57:13