`
jinxhj2003
  • 浏览: 149158 次
  • 性别: Icon_minigender_1
  • 来自: 南昌
社区版块
存档分类
最新评论

走近Flex组件系列(四):分组组件(Box)、分割组件(DividedBox)和容器组件(Panel)

    博客分类:
  • Flex
阅读更多
本文主要介绍Flex的Box,DividedBox和Panel组件的应用。



一、分组组件(Box)

     Flex中Box组件分两种,即VBox和HBox,也就是水平分组布局和垂直分组布局。下面对这两中分别进行介绍。

     Flex的VBox组件可以自动的帮助开发人员在界面布局的时候进行水平分组,所谓的分组也就是他会自动将放置在其内部的其他组件进行水平布局放置,如下mxml代码:

1     <mx:HBox x="81" y="148" width="219" height="42" fontSize="12"  borderStyle="solid"
2         verticalAlign="middle" horizontalGap="12" paddingLeft="10">
3         <mx:Button label="按 扭" fontWeight="normal"/>
4         <mx:Button label="按 扭" fontWeight="normal"/>
5         <mx:CheckBox label="复选框"/>
6     </mx:HBox>


     其中主要的属性有verticalAligh(水平对齐)、horizontaiGap(内部元素之间的间距)、padding(内部元素到四周的间距)、borderStyle(边框样式)等。  与其相反的则是HBox垂直分组,以下是示例代码:

1     <mx:VBox x="268" y="21" width="101" height="133" fontSize="12"  borderStyle="solid"
2         verticalGap="12" horizontalAlign="center">
3         <mx:Button label="按 扭"/>
4         <mx:Button label="按 扭"/>
5         <mx:CheckBox label="复选框"/>
6     </mx:VBox>

     下图为运行效果截图: 

     

二、分割组件(DividedBox)

     Flex中的DividedBox组件也分两种,即VDividedBox和HDividedBox。 如果你阅读过《Flex与.NET互操作》系列文章中的Flex与.NET互操作(五):使用FileReference+HttpHandler实现文件上传/下载 便会发现,里面就用到了HDividedBox组件,运行效果如图:

    

     如上图,将显示画面分隔为左右两部分,这就是使用HDividedBox组件的效果,有了水平分隔(左右分隔)那当然也有垂直分隔(上下分隔)了。要实现垂直分隔则需要使用VDividedBox组件来实现。详细请参考下面示例代码:

1     <mx:HDividedBox x="10" y="180" width="300" height="100" fontSize="12"
2         borderStyle="solid" borderColor="#2278E1">
3         <mx:Canvas width="100" height="100%" backgroundColor="#F4F6FE">   
4             <mx:Button x="17" y="42" label="Button" fontWeight="normal"/>
5         </mx:Canvas>
6         <mx:Canvas width="200" height="100%" backgroundColor="#EBF0F9">
7             <mx:Button x="33" y="40" label="Button" fontWeight="normal"/>
8         </mx:Canvas>
9     </mx:HDividedBox>
10     <mx:VDividedBox x="10" y="288" width="300" height="150" fontSize="12" borderStyle="solid">
11         <mx:Canvas width="100%" height="50" backgroundColor="#FAF9FF">
12             <mx:Button x="20" y="18" label="Button" fontWeight="normal"/>
13         </mx:Canvas>
14         <mx:Canvas width="100%" backgroundColor="#FAF9FF">
15             <mx:Button x="23" y="25" label="Button" fontWeight="normal"/>
16         </mx:Canvas>
17     </mx:VDividedBox>
     这个组件非常使用,使用也非常简单,运行效果如下图:

    



三、容器组件(Panel)

     Panle组件主要应用于定制用户界面容器,增强界面组件布局,其内部可以放置其他组件来定制更加丰富的用户交互界面。Flex的Panel与ASP.NET的Panel不一样,不只是简单的容器,它还可以定制外观以及标题等。详细请看下面介绍。

1     <mx:Panel x="10" y="301" width="250" height="200" layout="absolute"
2         title="Panel标题" fontSize="12" borderColor="#D2DAFD">
3         <mx:ColorPicker x="10" y="10"/>
4     </mx:Panel>


     使用很简单这里就不多说了,下面是运行结果截图,在Panel里放置了一个颜色选择组件:

    

分享到:
评论

相关推荐

    Flex3界面布局中文教程

    这些布局容器允许你创建可调整大小的面板,可以水平(HDividedBox)或垂直(VDividedBox)分割,DividedBox则同时支持两者。用户可以通过拖动分隔线来改变各部分的大小。 7. **Form 表单布局** Form布局容器专为创建...

    Flex_Boxs_BorderContainer_Canvas_DividedBox_Form

    在前端开发中,布局设计是至关重要的,而Flex布局(Flexible Box)则为现代Web页面提供了强大且灵活的布局解决方案。本教程将深入探讨“Flex_Boxs_BorderContainer_Canvas_DividedBox_Form”中的各个知识点,帮助你...

    Flex3界面布局中文教程--一路风尘制作

    DividedBox系列布局容器允许创建可调整大小的区域,其中HDividedBox和VDividedBox分别用于水平和垂直分割。这些布局非常适合于构建响应式界面,用户可以根据需要调整各个部分的大小,从而优化屏幕空间的使用。 ####...

    DividedBox divider简单实践

    "DividedBox divider简单实践"这个主题涉及的是一个特定的UI组件或者布局管理工具的使用,它可能是一个框架或者库的一部分,用于帮助开发者在应用程序中创建分隔的、可自定义的区域。这个实践可能是基于某个开发平台...

    WebUI4Angular是基于angularjs实现的一套UI组件

    WebUI4Angular是基于... 整套组件借鉴了UI Bootstrap等开源组件的写法,主要对指令进行了自己的封装,我们希望通过angular的指令编写一套类似flex的声明式UI组件,使得页面代码更加简洁,可读性更强,复用性更好

    想学习flex的,应该看看这个说明文档 好东西!

    Flex内置了多种控件和容器,如Button、DateChooser、Slider、Box、DividedBox、Panel、DataGrid、Tree和TileList等。初学者应熟悉这些组件的属性、事件、样式和效果,知道如何查找API文档,以及何时选择合适的组件。...

    Flex中的HDividedBox和VDividedBox的比较附图

    在Flex编程中,HDividedBox和VDividedBox是两种布局容器,它们都属于MX组件库,主要用于创建水平或垂直分割的区域。这两个组件在界面设计时常常用于分割显示不同内容的区域,使得用户界面更加清晰和有序。下面将详细...

    flex开发工具的学习.txt

    通过上述知识点的详细介绍,我们不仅了解了Flex开发的基本概念和技术栈,还深入探讨了Flex的各种UI组件、数据类型、控制结构以及容器与布局管理等方面的内容。这对于想要掌握Flex技术的开发者来说是非常宝贵的资源。

    xmlplus组件设计系列之分隔框(DividedBox)(8)

    xmlplus框架中的分隔框(DividedBox)组件是一种用于布局设计的组件,能够将页面分割为多个区域,并允许用户通过拖动分隔条来动态调整各个子区域的大小。分隔框分为水平分隔框(HDividedBox)和垂直分隔框...

    flex 第一步的bug

    - **DividedBox控件**:这是一种用于分割布局区域的容器控件,可以包含多个子控件并允许用户通过拖动分割线来调整各部分的大小。 - **`liveDragging`属性**:该属性控制了拖动行为的实时性,对于用户体验有着直接的...

    Flex3 界面布局教程

    ### Flex3 界面布局教程知识点详解 #### Canvas Layout 容器 Canvas 是 Flex 中一个非常基础且重要的布局容器,它允许开发者通过精确控制子元素的位置来构建界面。Canvas 容器本身定义了一个矩形区域,可以在此区域...

    WebUI4Angular:一组带有angularjs的组件,其中包括Datagrid,tree,dialog,progress,tilelist,tabset,dividedbox,imageview等

    参照了UI Bootstrap等组件的写法,主要对指令进行了自己的封装,我们希望通过angular的指令编写一套类似flex的声明式UI组件,使得页面代码更加简洁,可读性更强。 #Quickstart #Setup & Install 安装: npm install ...

    Developing Flex Applications 910p dda_doc88_cracker.zip

    1. a book Developing Flex Applications 2. a web page viewer for doc88 ebt 3. a DDA downloader for doc88.com CONTENTS PART I: Presenting Flex CHAPTER 1: Introducing Flex. . . . . . . . . . . . . . ...

Global site tag (gtag.js) - Google Analytics