Flex FAQ #6: Layout 秘技 Part 1
Vicker | August 2, 2008 | 1:42 am好多時候寫 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….
English title: Layout 101 Part 1
