flex中的分割组件(DividedBox)

最新推荐文章于 2024-07-03 18:01:55 发布

原创最新推荐文章于 2024-07-03 18:01:55 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

flex 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Flex中VDividedBox与HDividedBox组件的使用方法，并通过实例展示了如何设置布局属性来实现不同方向的分割效果。

Flex中的DividedBox组件也分两种，即VDividedBox（上下分割）和HDividedBox（左右分割）。

<mx:HDividedBox x="10" y="180" width="300" height="100" fontSize="12" 
         borderStyle="solid" borderColor="#2278E1">
         <mx:Canvas width="100" height="100%" backgroundColor="#F4F6FE">    
             <mx:Button x="17" y="42" label="Button" fontWeight="normal"/>
         </mx:Canvas>
         <mx:Canvas width="200" height="100%" backgroundColor="#EBF0F9">
             <mx:Button x="33" y="40" label="Button" fontWeight="normal"/>
         </mx:Canvas>
     </mx:HDividedBox>
     <mx:VDividedBox x="10" y="288" width="300" height="150" fontSize="12" borderStyle="solid">
         <mx:Canvas width="100%" height="50" backgroundColor="#FAF9FF">
             <mx:Button x="20" y="18" label="Button" fontWeight="normal"/>
         </mx:Canvas>
         <mx:Canvas width="100%" backgroundColor="#FAF9FF">
             <mx:Button x="23" y="25" label="Button" fontWeight="normal"/>
         </mx:Canvas>
     </mx:VDividedBox>

效果如下: