2013-04-30 1 views
0

TabNavigator가 있고 그 전에 내용을 자르지 않는 TabBar가있는 ViewStack이 있습니다. 오버 플로우가 발생하거나 화면 아래쪽에 위치한 다른 구성 요소 아래에 나타납니다. 누구도 전에 이것에 빠졌습니까? 내가 탭 내용의 크기를 조정 날의 애니메이션 GIF를 포함 시켰습니다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
:

여기 내 코드입니다. 보시다시피 마스크는 사용 가능한 영역이 아닌 내용의 크기로 표시됩니다. ??? 크기 조정시 탭 네비게이터의 테두리가 겹쳐져 있습니다.

모든 콘텐츠의 최소 높이를 100 %로 설정하고 높이가 높지는 않지만 콘텐츠가 여전히 잘리지 않는 것을 볼 수 있습니다.

또한 VDividedBox가 아닌 VGroup을 사용해 보았지만 문제가되지 않습니다. - 스크롤러 하나와 자동 크기 조정 또 다른 내가이 방법을 구현 한

<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

이 문제의 스크린 샷을 보여줄 수 : 여기

은 여기 example

인 코드? 무엇을해야하는지 명확하지 않습니다. – Anton

+0

몇 가지 스크린 샷을 추가했습니다. 왼쪽 이미지의 내용이 잘리지 않고 오른쪽 열에 있습니다. –

+0

주위에 VDividedBox가 있습니다. 코드를 업데이트했습니다. 가끔 아래쪽 탭을 위로 당기면 오른쪽 두 번째 이미지처럼 내용이 잘립니다. 그러나 내용이 길면 맨 아래 탭 그룹 아래의 페이지 아래로 계속 나타날 수 있습니다. –

답변

1

: 여기

enter image description here

는 다른 코드의 예이다.

<?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 %로 설정하지 않으면 항상 클립하지 않습니다. –

+0

나는 그것을 확인하고 내 대답을 줄 것이다. 감사 – Anton

관련 문제