mx:Panel （面板容器） mx:Button （按钮） 默认大小

1.默认组件大小

<mx:Panel title="默认的面板容器大小和按钮控件大小">
<!-- 使用控件大小默认值 -->
<mx:Button id="button1" label="按钮" />
</mx:Panel>

设置组件绝对值大小

<!-- 定义面板容器宽度为200像素，高度为200像素 -->
<mx:Panel title="默认的面板容器大小和按钮控件大小" width="200" height="200">
<!-- 定义按钮控件宽度为160像素，高度为25像素 -->
<mx:Button id="button2" label="按钮" width="160" height="25" />
</mx:Panel>

设置组件相对值大小

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>

    <!-- 定义面板容器宽度为200像素，高度为200像素 -->
    <mx:Panel title="默认的面板容器大小和按钮控件大小" width="50%" height="50%">
        <!-- 定义按钮控件宽度为160像素，高度为25像素 -->
        <mx:Button id="button2" label="按钮" width="50%" height="50%" />
    </mx:Panel>

</s:Application>

使用约束布局定义组件

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>

    <!-- 定义面板容器为约束布局 -->
    <mx:Panel title="约束控件大小示例" layout="absolute" width="100%" height="100%">
        <!-- 定义按钮控件到边框左边的距离为60像素，到右边的距离为30像素 -->
        <mx:Button id="button2" label="按钮" left="60" right="20" />
    </mx:Panel>

</s:Application>

使用自动定位

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="280" minHeight="240">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>

        <!-- 定义盒子容器 -->
        <mx:Box direction="vertical" width="100%" height="100%" backgroundColor="white">
        <!-- 定义2个按钮 -->
        <mx:Button id="button1" label="按钮 A" left="60" right="20" />
        <mx:Button id="button2" label="按钮 B" left="60" right="20" />
        </mx:Box>
</s:Application>

使用绝对值定位

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="280" minHeight="240">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>

        <!-- 定义盒子容器 -->
        <mx:Canvas borderStyle="solid" width="100%" height="100%" backgroundColor="white">
        <!-- 定义2个按钮 -->
        <mx:Button id="button1" label="按钮 A" width="150" height="50" />
        <mx:Button id="button2" label="按钮 B"  />
        </mx:Canvas>
</s:Application>