`
sherrysky
  • 浏览: 88690 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

flex的box中button的布局动态控制

阅读更多
同一个页面工具栏,要在不同的功能模块下显示不同的按钮,不能直接删除该空间,否则一些方法里用到这些控件,程序报错。但是需要根据模块功能动态隐藏一些,只用btntest1.visible=false,该控件所占的位置为一段空白,必须同时设置btntest1.includeInLayout=false,才能既隐藏控件又释放了其所占的空间。
如果用了box来布局所有功能按钮,作为一个工具栏,必须注意它的autoLayout="false" 会影响单独的btn 的隐藏并释放所占空间的功能,所以这个属性切忌不要false.
  我今天用单独的btn,都没有问题,就是放到box不行,后来发现是这个属性捣乱。

testbtn后自动隐藏test2并释放所占空间;但是testbtn1控制的box设置了autoLayout属性,test12所占空间没有释放!
示例:
           private function onclick():void
           {
           test2.includeInLayout=false;
           test3.visible=true;
           }
           private function onclick1():void
           {
           test12.includeInLayout=false;
           test13.visible=true;
           }
...
          <mx:Button id="testbtn" label="testbtn" width="80" click="onclick()" y="100">
          </mx:Button> 
          <mx:Button id="testbtn1" label="testbtn1" width="80" click="onclick1()" x="100" y="100">
          </mx:Button>    
        <mx:Box  y="120" height="35" width="100%" direction="horizontal" >
        <mx:Button id="test1" label="test1" width="100" height="30"  visible="true" toolTip="test1" />
        <mx:Button id="test2" label="test2" width="100" height="30"  visible="false" toolTip="test2" />
        <mx:Button id="test3" label="test3" width="100" height="30"  visible="false" toolTip="test3" />
        <mx:Button id="test4" label="test4" width="100" height="30"  visible="true" toolTip="test4" />

        <mx:ComboBox width="200">
       </mx:ComboBox>   
        </mx:Box>
         <mx:Box  y="180" height="35" width="100%" direction="horizontal"  horizontalGap="0" autoLayout="false">
        <mx:Button id="test11" label="test1" width="100"  height="30"   visible="true" />
        <mx:Button id="test12" label="test2" width="100"  height="30"  visible="false"  />
        <mx:Button id="test13" label="test3" width="100"  height="30"  visible="false"  />
        <mx:Button id="test14" label="test14" width="100"  height="30"  visible="true"  />

        <mx:ComboBox width="200">
       </mx:ComboBox>   
        </mx:Box>
...
0
0
分享到:
评论

相关推荐

    Flex垂直button

    在本文中,我们将深入探讨如何在Flex环境中创建一个垂直排列的按钮(Flex Vertical Button)以及一个包含垂直标签的TabNavigator组件。Flex是一个基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序...

    详解flex实现左右布局中按钮溢出隐藏效果

    本文将深入探讨如何使用Flex布局来解决这个问题,特别是如何在左右布局中实现按钮溢出隐藏的效果。 首先,让我们回顾一下Flex布局的基本概念。Flex布局,全称为Flexible Box,是CSS3中的一种布局模式,它为复杂页面...

    flex组件时间轴组件

    Flex布局(Flexible Box Layout)是CSS3的一种布局模式,旨在提供一种更加灵活的方式来处理元素的排列和对齐,特别是在响应式设计中。通过使用Flex布局,开发者可以轻松调整元素的大小和位置,以适应不同的屏幕尺寸...

    csss.rar_flex_flex 聊天

    6. **布局管理器 - Flex Box (Flex 布局)**:在Flex应用中,`Flex布局`是用于组织和定位组件的强大工具,尤其适合构建聊天界面。它可以处理不同屏幕尺寸和方向下的自适应布局,使组件能够根据需要自动调整大小和位置...

    button按钮在 IE 中两边被拉伸的解决办法

    标题中的“button按钮在IE中两边被拉伸的解决办法”是一个常见的前端开发问题,尤其在处理跨浏览器兼容性时。在Internet Explorer(IE)浏览器中,HTML的`&lt;button&gt;`元素可能会出现样式异常,例如按钮的内容被拉伸,...

    flex自定义组件

    在`Flex`布局中,有两个主要的角色:`flex容器`(父元素)和`flex项目`(子元素)。要启用一个元素作为`flex容器`,只需在其样式中设置`display: flex;`或`display: inline-flex;`。一旦容器被定义,其所有直接子...

    flex 劲爆游戏 flex 劲爆游戏

    9. **声音和视频**:Flex可以嵌入和控制音频和视频,为游戏增添音效和背景音乐,提升游戏体验。 10. **物理引擎**:为了模拟真实世界的物理效果,开发者可能会集成第三方物理引擎,如Box2D,实现重力、碰撞等物理...

    Flex4_Tutorials中文版

    4. **Graphical Layout System (Gumbo)**:Flex 4引入了全新的图形布局系统,称为Gumbo,它基于Flex Box布局模型,提供了更灵活的布局管理,能够更好地处理动态内容和不同屏幕尺寸的适配。 5. **Effects and ...

    Flex从入门到实践_1

    在Flex中,容器负责管理其子组件的位置和大小,如Box布局、Form布局、Grid布局等。了解布局管理器的工作原理,有助于优化界面设计,使应用适应不同屏幕尺寸。 6. **数据绑定** Flex支持数据绑定,这意味着视图...

    Flex cook book

    7. **Layout管理器**:Flex提供了多种布局管理器,如Box、Tile和Form布局,帮助开发者组织组件。书中会解释如何选择和使用不同的布局管理器。 8. **Flex Builder和IDE**:Flex Builder(现为Flash Builder)是开发...

    CSS的box-align属性控制子元素布局实例

    在新版Flexbox布局中,这个功能已被`align-items`属性取代。 ### `box-align`属性值 1. **start**:子元素的顶部(对于正常方向的盒模型)或底部(对于反方向的盒模型)与容器的相应边缘对齐。剩余的空间将分配在...

    flex2 第一步 光盘文件

    学习如何布局组件,使用Box和Form布局容器,以及如何自定义组件以满足特定设计需求。此外,这一章还会讲解如何通过MXML语言来声明式地创建用户界面,以及ActionScript与MXML的混合编程。 **第七章:数据绑定和事件...

    Flex3基础教程PPT

    3. **基本组件**:介绍Flex3中的基础UI组件,如Button、Label、TextInput、List等,以及它们的属性、事件和方法,如何在MXML中使用它们来构建界面。 4. **布局管理**:讲解了各种容器(如Box、Form、Canvas等)及其...

    wxPython窗口布局技术大全

    4. **考虑性能**:虽然sizers非常强大,但过度复杂的布局结构可能会影响性能,尤其是涉及大量动态调整的情况。 #### 六、总结 通过本文的介绍,你应该对wxPython中的布局技术有了较为全面的了解。合理选择并运用...

    flex写的六面体翻转

    1. **Flex组件库**:Flex提供了一系列预定义的UI组件,如Button、Canvas、VGroup等,这些组件可以帮助快速构建界面。在这里,我们可能需要自定义一个组件来表示六面体的每个面,或者利用现有的Box类进行改造。 2. *...

    cssz做的button

    本压缩包中的"cssz做的button"显然聚焦于CSS技术在创建按钮元素时的应用。CSS按钮设计是一个重要的实践领域,因为它直接影响到用户界面的美观和交互性。下面将详细讨论这个主题。 首先,CSS按钮的基本结构通常涉及...

    flex3的cookbook书籍完整版dpf(包含目录)

    3.4 节在容器中动态添加和移除子组件 3.5 节对容器使用基于约束的布局 3.6 节在容器内为子组件设置最大、最小尺寸 3.7 节为容器指定行和列的约束 3.8 节使用约束条件为文本创建排版流程(Layout Flows) 3.9 节在容器...

    50个CSS超炫丽button按钮样式代码

    10. 按钮组:在网页中,有时会需要将多个按钮组合在一起,这时可以利用CSS的`display: inline-block`或`flex`布局来实现按钮的水平排列或垂直堆叠。 11. 按钮状态提示:通过`opacity`和`disabled`属性,可以为按钮...

    Flex UI组件使用全集

    - **Spacer**: 用于布局中的空白区域。 - **TabBar**: 套装式标签栏组件。 - **TileList**: 网格状布局的列表组件。 - **Tree**: 展示层级关系数据的树形结构组件。 #### Buttoncontrols(按钮组件) - **Button**...

Global site tag (gtag.js) - Google Analytics