温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Flex应用程序设计界面布局的实现方式是怎样的

发布时间:2021-11-24 13:11:16 来源:亿速云 阅读:150 作者:柒染 栏目:编程语言

Flex应用程序设计界面布局的实现方式是怎样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

和大家重点讨论一下如何为Flex应用程序设计界面布局,许多容器组件都允许以绝对坐标的方式创建布局,你可以对应其父容器的相对位置来放置组件并约束它们,使它们在Flex应用程序的界面放大或缩小时仍然保持其彼此的位置。

为Flex应用程序设计界面布局

让我们来详细分析一下前面那个“SayHellotoFlex“的简单例子,你可以通过设置组件的属性值来控制Flex应用程序的界面布局,就象如下所示:

<?xmlversionxmlversion="1.0"encoding="utf-8"?> <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> <mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%"> <mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"left="10"  right="30"/> <mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/> </mx:Panel> </mx:Application>

许多容器组件都允许以绝对坐标的方式创建布局,这就意义着你可以使用精确的x和y的坐标来放置组件。你还可以对应其父容器的相对位置来放置组件并约束它们,使它们在Flex应用程序的界面放大或缩小时仍然保持其彼此的位置。

在这个例子中,面板/Panel组件的布局属性被设置为绝对值方式,同时所有容器的大小都被设置为应用程序的百分之八十。两个组件(TextArea和Button)被放置到距离面板容器边界的特定象素位置上。

使用风格和主题增强视觉方面的设计

如果样式/style的属性值没有被指定,它们将由整个程序中运行的主题/theme来进行控制。在默认情况下,Flex应用程序使用Halo主题(就象上面那个例子那样)。当然,你可以修改默认的主题或者干脆自己创建一个。你还可以简单地指定新的样式定义来改变默认的主题样式,就象这样:

<?xmlversionxmlversion="1.0"encoding="utf-8"?> <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">  <mx:Style> TextArea{  font-size:36px;  font-weight:bold;  }  </mx:Style>  <mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%"x="122"y="24"> <mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"left="10"right="30"/>  <mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/> </mx:Panel> </mx:Application>

通过明确地为TextArea组件定义一个样式,应用程序现在看起来就会象这样了:

在这个例子中,一种新样式在MXML文件中的<mx:Style>标签里进行了定义。如同我们前面所提到过的,你还可以通过修改主题或应用新主题、使用一个外部CSS文件、或者设置单独的样式属性来达到设置新样式的目的。
将一个样式单导入到MXML文件中,你需要添加如下的代码:

<mx:Stylesourcemx:Stylesource="styles.css"/>

看完上述内容,你们掌握Flex应用程序设计界面布局的实现方式是怎样的的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI