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

A List with Label and Button itemRenderer

 

 

但係有時總會出現一 d item o既名太長…

結果令到 button distort 左~

 

Too long label resulting distorted button

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

Related posts

Comments
No Comments »
Categories
Flex
Tags
, , , , , , , ,
Comments rss Comments rss
Trackback Trackback