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

时间：2022-04-17 21:20:44

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>

相关文章