如何防止itemRenderer中的容器超出列表容器的寬度？

在一個Flex移動項目中，我有一個簡單的itemRenderer，我試圖創建一個類似於ichat或iphone的「泡泡」發短信效果（只是讓你得到即將發生的事情）。但是，如果文字比屏幕更長，那麼它就不是一條線。如何防止itemRenderer中的容器超出列表容器的寬度？

如果我將持有矩形（創建泡泡效果）的組以及標籤設置爲100％，並且不會超過列表容器邊界，但該組始終爲100％，並且看起來不好努力保持文本週圍的「泡沫」。

反正所以，在我的itemRenderer頂部我試過指定：

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">

這是我的佈局我因爲msg_container想通了100％我希望bubble_lable_group只想不超過這一點，但寬度..它沒有...它只是跑了。我嘗試設置最大寬度，但不允許輸入百分比。而只是再說一次。我知道如果我將寬度設置爲100％，它可以防止邊緣發生變形，但是矩形「泡沫」會一直延伸，看起來很糟糕。

<s:VGroup id="main_container" horizontalAlign="left" paddingBottom="10" paddingTop="10" 
       verticalAlign="top" width="100%"> 

     <s:VGroup id="name_container" width="100%"> 
      <s:Label id="name_label" fontSize="20" fontWeight="bold" text="Name: " /> 
     </s:VGroup> 

     <s:VGroup id="msg_container" width="100%" paddingLeft="20"> 
      <s:Group id="bubble_lable_group"> 
       <s:Rect id="the_bubble_shape" width="100%" height="100%" radiusX="15" radiusY="15" > 
        <s:fill> 
         <s:LinearGradient rotation="90"> 
          <s:GradientEntry color="{grOne}"/> 
          <s:GradientEntry color="{grTwo}"/> 
         </s:LinearGradient> 
        </s:fill> 
       </s:Rect> 
       <s:Label id="msg_txt" width="100%" text="msg text here" 
         fontSize="18" color="#FFFFFF" paddingTop="15" paddingRight="15" paddingBottom="15" paddingLeft="15"/> 
      </s:Group> 
     </s:VGroup> 

    </s:VGroup>

任何想法或竅門，我可以拉動以達到我要去的效果，並將其保留在父List容器中？我很難過。

編輯：這裏有一些截圖來說明問題： enter image description here

來源

2011-07-02 brybam

請問您列表設置variableRowHeight爲真？截圖可能有助於和/或完整的可運行樣本。 – JeffryHouser

我添加了一些截圖來幫助說明問題。我不認爲火星移動列表有variableRowHeight似乎並不存在。但正如您在第二張屏幕截圖中看到的那樣，它會在寬度設置爲100％時調整高度。我只是不明白爲什麼bubble_lable_group超過msg_container。我想，因爲我沒有指定任何東西，只是認爲它可以運行。 – brybam

在Spark中，您在佈局類上設置variableRowHeight;不是實際的清單。 – JeffryHouser

嗯，它看起來像你想設置的maxWidth屬性。只有，你只能用像素來設置，而不是百分比。我猜測，既然你在手機上，你不想設置絕對像素。 Soooo，如果你做了一些棘手的事情呢？數據的最大寬度綁定成爲渲染減去你的消息容器的填充寬度...

<s:Group id="bubble_lable_group" maxWidth="{width - msg_container.paddingLeft}" >

感覺像一個黑客，但它爲我工作:)

注：使用在Mobile中，標準的ItemRenderer類相當低效。這對你來說可能不是問題，但要注意它。看到這360Flex的介紹對更多的信息：http://zaa.tv/2011/06/360flex-denver-2011-flex-performance-tips-and-tricks/

來源

2011-07-02 01:13:02

嗯，它的工作原理！那謝謝啦！ ...但它給了我一些警告，'在這條線上的多個標記： - 數據綁定將無法檢測到「paddingLeft」的分配''我不完全確定這是爲什麼這樣工作..我試過'{寬度 - msg_container.width}'，只是'{msg_container.paddingLeft}'但這些都不起作用。你真的認爲這是做到這一點的唯一方法嗎？那些警告會刺激我的垃圾。關於ItemRenderer類還有其他選擇嗎？我知道IconItem渲染器，但我不認爲你可以按照自己的方式自定義它。 – brybam

由於'paddingLeft'不是'[Bindable]'，你會得到這個錯誤。最初的綁定工作，但更新到該變量不。這是警告告訴你的。這種情況不是問題，因爲'paddingLeft'不會改變。有可能是一個更好的方法來做到這一點...但是這是我想出來的那個:)'ItemRenderer'，'IconItemRenderer'，AS-Only最容易最難但最慢最快。你可以通過'IconItemRenderer'或AS-Only渲染器來處理這個問題...這只是更加困難。 –

要修復警告，可以在bubble_label_group和其寬度爲100％的父級之間有另一個組，並且頂部具有填充，以便內部組僅綁定到上面的寬度（不需要填充）。或者使用創建完成事件手動設置它。 –

我一直在尋找一個不同的問題，但是這可能是有益的clipAndEnableScrolling =「真」

來源

2013-12-22 02:32:37 csomakk

如何防止itemRenderer中的容器超出列表容器的寬度？

回答

相關問題