Flex 学习之路之十用户接口user interface整体布局

关注

原创最新推荐文章于 2026-09-16 13:00:06 发布 344 阅读 AI 写同款· GEO 优化 ›

嵌入式GUI开发实战：emWin的GUIBuilder与Skinning机制深度解析在嵌入式系统开发中，图形用户界面（GUI）的实现常面临资源受限与视觉定制两大挑战。其核心原理在于通过高效的渲染引擎与控件管理机制，在有限的硬件资源上构建流畅的交互体验。从技术价值看，优秀的GUI框架能显著提升开发效率与产品竞争力，尤其在消费电子、工业控制等对界面美观度与响应速度有高要求的应用场景中。本文聚焦于emWin框架，深入剖析其GUIBuilder可视化工具与Skinning皮肤机制如何协同工作。GUIBuilder通过拖拽布局与自动代码生成，解决了界面“从无到有”的效率瓶颈；而Skinning机制则阅读详情

<?xml version="1.0"?>
<!-- containers\application\AppSizePercent.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Main Application" width="100%" height="100%">
<mx:HDividedBox width="100%" height="100%">
<s:TextArea text="TA1" width="50%" height="100%"/>
<mx:VDividedBox width="50%" height="100%">
<s:TextArea text="TA2" width="100%" height="75%"/>
<s:TextArea text="TA3" width="100%" height="75%"/>
</mx:VDividedBox>
</mx:HDividedBox>
</s:Panel>
</s:Application>

这个我喜欢，一直在想怎么做个整体的布局，这个可以借鉴下

首先是左右分，然后是上下分

HDividedBox 容器像 HBox 容器一样水平放置其子项，但会在各子项的间隔之间插入可拖动的分隔符。用户可以通过拖动此分隔符来调整分配给各子项的区域大小。<mx:HDividedBox/> 标签与 <mx:DividedBox direction="horizontal"/> 相同。

HDividedBox 容器具有以下默认大小特征：

特征	说明
默认大小	宽度足以容纳使用默认宽度或明确指定的宽度时的所有子项、子项间的任何水平间隔，以及容器的左右填充。高度为最高子项的默认高度或明确指定的高度与容器的上下填充之和。
默认填充	上、下、左、右的值均为 0 像素。
默认间距	水平和垂直间距为 10 像素。