Maui 教學 – FlexLayout是一個可以容許一行或一列中包含多個Controls的Layout, 在Controls Overflow時, 把Overflow 的 Control 自重Wrap起來, 放至下一行或列.
FlexLayout的優點
- 使用FlexLayout的好處在於可以把相同或不同SIZE的GUI塊件盡量滿滿自動得排列起來, 而不用刻意地排列(如列出X, Y位置). 用起來較為彈性.
FlexLayout的例子
- Image Gallery: 由於Image的Size可能會不同, 如有些直排, 有些橫排, pxiel也可能不同, 運用FlexLayout可以令圖片自動作出排列, 固較為合適.
- 一些情況下GUI塊件是User即時加進去的, 例如USER在編輯客戶公司資料時, 不會固定地要只加一個相關負責人, 可能兩, 三, 甚至四個負責人, 固定只設一行會不夠用, 三, 四行又可能過多. 固在有需要時才加入會比較好. 由於FlexLayout是自動排序及Wrap, 因此方便User即時加資料, 對於加進這些不固定的資料, FlexLayout會為適合.
那現在就開始實作了, Let’s Code!
| 例子: |
| <FlexLayout Direction=”Row” AlignItems=”Start” JustifyContent=”Center” Wrap=”Wrap”> <BoxView Color=”Red” WidthRequest=”150″ HeightRequest=”150″/> <BoxView Color=”Yellow” WidthRequest=”150″ HeightRequest=”150″/> <BoxView Color=”Blue” WidthRequest=”150″ HeightRequest=”150″/> <BoxView Color=”Green” WidthRequest=”150″ HeightRequest=”150″/> <BoxView Color=”Orange” WidthRequest=”150″ HeightRequest=”150″/> <BoxView Color=”Purple” WidthRequest=”150″ HeightRequest=”150″/> </FlexLayout> |
| 注意事項: Direction為此件的重要參數, 決定是由上而下或由左而右的排列. Direction分為兩值Row和Column: Row為由左而右, 即填一满一列再填下一列 Column為由上而下, 即填满一整行, 再填下一行. |
| 結果如下: |
