`
sherrysky
  • 浏览: 86626 次
  • 性别: 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 布局教程

    Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程

    小程序源码 FlexLayout布局 (代码+截图)

    小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...

    CSS的flex布局.ppt

    网页布局(layout)是CSS的一个重点应用。... 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

    flex 编写的计算器 Button动态实现

    用flex编写的一个计算器,0-9数字按钮通过as 动态实现 直接讲文件导入flash builder就可以使用

    flex布局Flex实现常见布局的汇总

    flex全称Flexible Box模型,顾名思义就是灵活的盒子,不过一般都叫弹性盒子,所有PC端及手机端现代浏览器都支持,所以不用担心它的兼容性,有了这玩意,妈妈再也不用担心我们的布局。 先简单介绍一下,要使用flex...

    携程网站 移动端 Flex布局

    携程网站 移动端 Flex布局,新人可以利用此资源来学习flex布局的应用 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...

    基本布局_flex基本布局模板_flex_

    可以实现flex布局的基本功能,flex的基本布局模板

    flex布局笔记flex布局笔记

    flex布局笔记

    CSS3样式表-定位之Flex布局.pptx

    什么是Flex布局Flex是Flexible Box的缩写,意为”弹性布局”。用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ //行内元素的弹性布局 display: inline-flex;}.box{ display: flex;}设为...

    微信小程序 FlexLayout布局 (源码)

    微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...

    flex布局.html

    flex布局.html

    flex重载Button 文本自动换行

    重载flex的Button, 使文本能够自动换行

    Flex布局.xmind

    Flex布局.xmind

    Flex布局之关于组件的大小

    Flex布局之关于组件的大小 Flex布局之关于组件的大小

    Flex布局学习资料

    Flex布局学习资料,2018年整理的不错的Flex布局学习教程

    flex 页面布局教程

    flex 页面布局教程 详细介绍了页面的各个组件

    Flex页面布局

    Flex开发中最基础的也是初学比较模糊的就是页面的布局,而这几张图片就能精妙透彻的解释Flex中页面布局的精华!

    flex布局布局篇

    高清非扫描版本,特别适合放在kindle中看,非常好适合初始上手快

    微信小程序的FlexLayout布局实例.rar

    本源代码将研究学习微信小程序的FlexLayout布局实例,微信小程序界面设计实例,是一种流布局的实现例子,而不是大家熟悉的盒子式布局,据说即使需要深层的嵌套,FlexLayout布局的响应速度也不会超过1ms,可谓是非常...

    FLEX动态树 动态图表

    FLEX 动态树 动态图表 FLEX 动态树 动态图表

Global site tag (gtag.js) - Google Analytics