Flex權威指南3學習筆記之一——介面知識(二)

使用基於條件的約束的布局

1.在viewCart按鈕和checkOut按鈕添加分別添加屬性“right="90"”、“right="10"”，刪除x屬性，y屬性值設為0，如下所示：

 

<mx:Button label="View Cart" id="btnViewCart" right="90" y="0"/></p><p><mx:Button label="Checkout" id="btnCheckout" right="10" y="0"/><br />

兩個按鈕將會靠右顯示，不用將座標定死。

2.另外 著作權標籤如下顯示

<mx:Label text="(c) 2006, FlexGrocer" bottom="10" right="10"/>

 

顯示效果如下所示：

3.在第一個VBox下再添加一個VBox，用於顯示購物車資訊

<mx:VBox height="100%" id="cartBox"><br /><mx:Label text="Your Cart Total: $"/><br /><mx:LinkButton label="View Cart"/></mx:VBox>

4.所有代碼如下所示：

<?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><br /><mx:ApplicationControlBar dock="true" width="100%" height="90"><br /><mx:Canvas width="100%" height="100%"><br /><mx:Label x="0" y="0" text="Flex"/><br /><mx:Label x="0" y="41" text="GROCER"/><br /><mx:Button label="View Cart" id="btnViewCart" right="90" y="0"/><br /><mx:Button label="Checkout" id="btnCheckout" right="10" y="0"/><br /></mx:Canvas><br /></mx:ApplicationControlBar><br /><mx:Label text="(c) 2006, FlexGrocer" bottom="10" right="10"/><br /><mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox"><br /><mx:VBox width="100%" height="100%" id="products"><br /><mx:Label text="Milk" id="prodName"/><br /><mx:Label text="$1.99" id="price"/><br /><mx:Button label="Add To Cart" id="add"/><br /></mx:VBox><br /><mx:VBox height="100%" id="cartBox"><br /><mx:Label text="Your Cart Total: $"/><br /><mx:LinkButton label="View Cart"/><br /></mx:VBox><br /></mx:HBox></p><p></mx:Application>

5.運行結果為：