kagamihogeの日記

kagamihogeの日記です。

Spacer によるコンポーネントの左・右・中央寄せレイアウト

Flex には、Spacer という空白(何も描画しない空間)を挿入する GUI コンポーネントが用意されている。リファレンスに書いてある通り、コンポーネントのレイアウトに役立ちます。

コンポーネントの右寄せ・左寄せ・中央寄せのサンプル。

<mx:HBox width="100%" borderStyle="inset">
    <mx:Spacer width="100%" />
    <mx:Button label="ボタン" />
</mx:HBox>
    <mx:HBox width="100%" borderStyle="inset">
    <mx:Button label="ボタン" />
<mx:Spacer width="100%" />
</mx:HBox>
<mx:HBox width="100%" borderStyle="inset">
    <mx:Spacer width="100%" />
    <mx:Button label="ボタン" />
    <mx:Spacer width="100%" />
</mx:HBox>

実行イメージはこうなる。

width を 100% にした Spacer でコンポーネントを挟むと、空気読んで中央に配置してくれるのがナイスですね。