好多時候寫 Flex application 有大部份時間都係用o係 UI layout
雖然 Flex 既 UI layout 已經好易寫~ 但係有時想做到心目中既效果唔係咁易

舉個例我地想整一個 shopping cart list
我地會用 List + itemRenderer
itemRenderer 既 content 多數係 Label + Button
通常我地都會將 Label 放埋一邊~ Button 放另一邊~ 好似咁…


A List with Label and Button itemRenderer

但係有時總會出現一 d item o既名太長…
結果令到 button distort 左~


Too long label resulting distorted button

解決方法係利用 Label o既 truncateToFit
而用 truncateToFit o既時候一定要 define minWidth 或者 maxWidth
直覺上當然係用 maxWidth 啦~

計法就係:
maxWidth = itemRenderer width – Button width – horizontalGap

但係呢種做法首先非常煩~ 而且容易錯
再諗下如果 Button width 轉咁點算呢…
重新計過…
當然可以用 data binding 解決… 但係你諗下咁樣做 d code 係幾咁長…

咁有無終極方法呢?
有… 但係唔容易明… 竟然係用 minWidth

<mx:itemRenderer>
    <mx:Component>
        <mx:HBox>
            <mx:Label width="100%" minWidth="0" text="{data.label}" truncateToFit="true" />
            <mx:Button label="{outerDocument._button_label}" />
        </mx:HBox>
    </mx:Component>
</mx:itemRenderer>

後來同 Way discuss 之後諗諗下都有道理
因為 truncateToFit 先決係 minWidth 或者 maxWidth 要 set
如果 set minWidth = 0 其實無影響 layout 但係會開著 truncateToFit
然後 set width = 100% 就可以解決…

總之有時寫 Flex UI 要寫得好~
個腦係要 Flex-ible 一 d….

Please enable Javascript and Flash to view this Flash video.

English title: Layout 101 Part 1

Related posts:

  1. Flex FAQ #9: 點解要 Spark
  2. Flex FAQ #1: 點樣令 Flex 程式開始時將 cursor 指定係某一個 TextInput 裡面
  3. Flex FAQ #2: 點樣清除亂左既 subclipse .svn 資料
  4. Flex FAQ #3: 點樣用 Flex FileReference 下載檔案
  5. Flex FAQ #5: 點樣做 Full Screen Application