`

Flex 流式布局 之 滚动条篇

    博客分类:
  • Flex
阅读更多

Flex 流式布局 之 滚动条篇

 

    flex 框架支持流式布局,什么是流式布局呢,就是在运行时对象的大小是未知的,它可能需要由他的内容(childs)或由它的容器来决定它的实际大小。flex 中有两种流式一种就是 百分比形式的(percentWidth),还以一种就是默认的 measuredWidth。

 

   那么这个流式布局又和滚动条有什么联系呢?看一下以百分比形式的例子


 

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%" height="100%" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            import mx.controls.Button;
            private function clickHandler():void {
                var bt:Button = new Button();
                inner.addChild(bt);
            }
        ]]>
    </mx:Script>
    <mx:Button label="Button" click="clickHandler()"/>
    <mx:HBox width="100%" height="100%" borderStyle="solid" borderThickness="10" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20">
        <mx:HBox width="100%" height="100%" borderStyle="solid" borderThickness="10" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20">
            <mx:HBox id="inner" width="100%" height="100%" borderStyle="solid" borderThickness="10" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20" borderColor="#43C50A">
            </mx:HBox>
        </mx:HBox>
    </mx:HBox>
</mx:Application>
 

 

3个HBox width height 都是 100%,当点击按钮时,会在最里面的HBox (id=inner ) addChild 一个button,因为是百分比的流式布局那么 最里面的 那个inner在未点击前的大小是由它的parent决定的,这时它实际上是有了已经计算过的measureWidth 和 measureHeight了,但是当有child(这里是button)加入后,它的measure值会变吗?看一下图

 


直到加了5个之后inner的measure值都没变,但是在加第6个时候inner的measure值变了,因为child的视图范围超出了它原来的大小所以就把inner撑大了,从而有导致inner的parent的视图范围超出了inner的parent原来的大小所以inner的parent也被撑大了,就这样一直传到最外面一层,也就是Application,但是Application是有固定大小的是player给它的。

 

    为什么会这样的呢?为什么,滚动条被加到最外层了,而我想让他出现在最里层怎么办?

    首先,来看一下,在第一次inner addchild时发生了写什么。

 

    1.override mx_internal function addingChild(child:DisplayObject):void

           inner.invalidateSize();
           inner.invalidateDisplayList();

           标记inner下一个更新要重新算次村和布局

    2.override mx_internal function childAdded(child:DisplayObject):void

          child.initialize();

          child.invalidateProperties();
          child.invalidateSize();
          child.invalidateDisplayList();

          flex框架级别生命周期开始

   3.(这里只看尺寸和布局相关的),受LayoutManger控制,执行顺序是

        child.invalidateSize();

        inner.invalidateSize();

        inner.invalidateDisplayList();

        child.invalidateDisplayList();

        这个顺序和程序刚开始的顺序是一样的,commit从外到里面,在由measue从里面到外面,在由updatDispalyObject从外到里面。

 

   4.child.invalidateSize();会得到button的尺寸,这里button没有给他具体值,它将采用它的默认值作为它的高宽

       然后inner.invalidateSize();在layoutManager的管理下执行inner.validateSize() 做写什么事情呢,先执行 HBox的布局管理对象layoutObject.measure(),做写什么事情呢,计算inner自己的measure,包括刚刚加进来的buttom 和一些gap,然后根据meause出来的值 判断inner的大小有没有变,如果变了还会调用parent.invalidateSize();parent.invalidateDisplayList();  在执行到inner.invalidateDisplayList();这里会设置inner的大小了(是在public function validateDisplayList():void)

 

好晕哦,问题的关键是什么呢,就在最后一次 addChild 后inner measure出来的值变了,从而导致inner变大了,所以就往外挤,一直把滚动条推到最外面一层。

 

像这样,

 

 那如果想这样,就是这几个嵌套的HBox已经创建了,往inner里面加button,只在inner原有的基础上加滚动条呢?

 

很简单,就是在 inner的layoutObject.measure()时候对于百分比的情况的计算,或则干脆去掉inner.measuer()

 

对于百分比流式布局的inner的大小让parent去控制,好来看一下。

 

override protected function measure():void{};
 

 


可以了。

 

  • 大小: 53.6 KB
  • 大小: 51 KB
  • 大小: 54.1 KB
  • 大小: 55.9 KB
分享到:
评论
4 楼 love51 2012-09-14  
楼主,我按照你的代码demo,还是不能实现inner中出现滚动条,我不知道问题出在哪里
3 楼 chaimzane 2012-07-10  
chaimzane 写道
显示设置了 width 和 height后,是不会去 measure的,我觉得在设置百分比后,也不应该去meauser的但是,事实却不是的,不知道 Adobe 这样做的原因是什么

chaimzane 写道
显示设置了 width 和 height后,是不会去 measure的,我觉得在设置百分比后,也不应该去meauser的但是,事实却不是的,不知道 Adobe 这样做的原因是什么



还是要的比如 父容器就是顶层容器比如popup出来的 width =100% height = 100% 子容器 width = 100% height = 100% 你认为父容器实际是多大呢, 难道是0么?
2 楼 baixiaozhe 2009-07-30  
辛苦了 辛苦了
1 楼 chaimzane 2009-05-11  
显示设置了 width 和 height后,是不会去 measure的,我觉得在设置百分比后,也不应该去meauser的但是,事实却不是的,不知道 Adobe 这样做的原因是什么

相关推荐

    css网页布局学习笔记

    5. 固定定位:元素相对于浏览器窗口定位,即使滚动页面也不会移动。 四、Flexbox布局 Flexbox(弹性盒布局)是现代CSS布局的主要工具,尤其适用于单列布局。它允许元素在容器内部自动调整大小和位置。关键属性包括`...

    DIV+CSS布局大全

    - **流式布局**:使用百分比单位让元素随屏幕尺寸变化而变化。 - **Flexbox响应式布局**:利用Flexbox的特性实现自适应布局。 - **Grid响应式布局**:利用CSS Grid布局实现更复杂的响应式布局。 #### 六、高级布局...

    Div+CSS 布局大全

    - 移动优先和流式布局策略,确保页面在不同设备上的良好显示。 8. **浏览器兼容性**: - 不同浏览器可能对某些CSS特性支持程度不同,需要了解各浏览器的兼容性表,并使用前缀(如-webkit-)来保证在旧版本浏览器...

    原生JS经典小项目-网页布局

    而CSS则通过设置margin、padding、display属性等来控制元素的位置和尺寸,实现基本的布局方式,如流式布局、网格布局和盒模型布局。 在JS的世界里,我们可以利用DOM(文档对象模型)来动态地修改HTML元素的属性,...

    21.5 CSS 网页布局方式

    - **流式布局(Fluid Layouts)**:使用百分比单位创建可适应屏幕大小的布局。 - **断点(Breakpoints)**:在特定屏幕尺寸下更改布局。 以上知识点涵盖了从传统布局到现代布局的各种方法。学习并熟练掌握这些...

    实用 DIV+CSS布局大全

    - **流式布局**:元素按照从左到右的顺序排列,适用于不同屏幕尺寸的响应式设计。 - **固定布局**:元素的宽度和高度设定为固定像素值,适合屏幕尺寸相对固定的场景。 - **网格布局**:将页面划分为多个网格,...

    微信小程序瀑布流

    在创建瀑布流布局时,我们需要在WXML中定义容器和元素的结构,然后在WXSS中设置相应的样式来实现流式布局。 2. **CSS Flex布局**:微信小程序中的WXSS支持CSS3特性,因此我们可以利用Flex布局来创建瀑布流。通过`...

    详解左右宽度固定中间自适应html布局解决方案

    在网页设计中,经常遇到一种布局需求:左右两侧的元素宽度固定,而中间的元素则根据屏幕大小...表格布局兼容性好,但不适合复杂的流式布局;弹性布局和网格布局提供了更强大的布局能力,但可能需要考虑兼容性问题。

    frontend-layouts:练习前端布局

    1. **流式布局(Fluid Layout)**:流式布局使页面元素随着浏览器窗口大小的变化而自适应调整,确保在不同设备上都有良好的显示效果。JavaScript可以用来实时计算元素的尺寸,实现完全的响应式设计。 2. **网格布局...

    控件自适应换行

    通常,这涉及到流式布局(如网格系统)或百分比宽度的应用,使得控件能够自动地在达到容器边界时换行。 2. 实现方式: - CSS Flexbox:Flexbox是一种现代的布局模式,可以轻松实现控件的自适应换行。通过设置`...

    css+ div网页制作模板

    通过设置`div`的宽度、高度、边距和内边距,可以创建各种复杂的布局模式,如网格系统、流式布局、定位布局等。 滑动表格(通常称为滚动表格或滚动条)是网页设计中的一种常见功能,特别是在数据量大或者需要在有限...

    基于web前端开发下div+css第二课堂管理系统

    常见的布局模式有流式布局、网格布局和响应式布局。 - **定位技巧**:使用`position`属性(static, relative, absolute, fixed)可以实现元素相对定位,结合`top`, `right`, `bottom`, `left`属性进行精确调整。 -...

    xhtml布局css样式网站模板

    `则让元素相对于浏览器窗口定位,即使滚动页面,元素也会保持在屏幕的特定位置。 此外,CSS的Flexbox(弹性盒模型)和Grid(网格布局)也是现代网页布局的重要工具。Flexbox适用于一维布局,如导航栏、卡片式布局等...

    div+css单页布局实例dw模板下载

    使用display属性(如block、inline-block、flex、grid)来调整元素的显示方式,创建流式布局、网格布局等。 DW模板是预设计好的网页结构,可以帮助开发者快速搭建页面。"div+css单页布局实例dw模板下载"可能包含了...

    CSS样式 JS特效 Java小工具 文学文档 Java插件 截图软件

    学习CSS,你需要理解选择器、盒模型、布局方式(如流式布局、网格布局、Flex布局和Grid布局)、响应式设计以及CSS预处理器(如Sass、Less)等概念。 “JS特效”指的是使用JavaScript语言实现的各种视觉效果。...

    mobile-view

    2. **流式布局(Fluid Layouts)**:流式布局使用相对单位(如百分比)而不是绝对单位(像素)来定义元素尺寸,使布局可以根据屏幕大小变化而灵活调整。这样,无论屏幕大小如何,内容都能保持适当的比例。 ```css ....

    常见的几种页面布局、BFC以及处理过程中遇到的高度塌陷问题

    当屏幕尺寸变化时,页面会出现滚动条,以适应内容。静态布局的优点在于代码简洁,易于编写,且兼容性良好。缺点则在于不能根据屏幕尺寸自适应调整,可能导致在不同设备上显示效果不佳。 2. 定位布局:通过CSS的`...

    CSS设计定向针,让你想到就能做到

    这通常包括流式布局、弹性图片和媒体查询的应用。 学习并熟练掌握这些CSS定位技术,将有助于Web设计师和开发者创造出更加精美、功能丰富的网页。同时,持续关注CSS的新特性(如Grid和Flexbox的最新改进),将使你的...

    htmllayouts

    1. **流式布局(Fluid Layout)**:这种布局方式允许页面内容根据浏览器窗口大小自动调整,提供了一种响应式的用户体验。JavaScript可以用来检测窗口大小变化,并相应地调整元素尺寸。 2. **网格布局(Grid Layout...

    PinterestStyleGrid:仅 CSS 响应式 pinterest 样式网格

    1. **流式布局**:Pinterest网格采用瀑布流式设计,使得每个单元格可以自适应不同的屏幕尺寸,自动调整其宽度和高度,以充分利用空间。 2. **多列布局**:在大屏幕上,网格可能包含多列,而在小屏幕上则变为单列,...

Global site tag (gtag.js) - Google Analytics