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
分享到:
相关推荐
5. 固定定位:元素相对于浏览器窗口定位,即使滚动页面也不会移动。 四、Flexbox布局 Flexbox(弹性盒布局)是现代CSS布局的主要工具,尤其适用于单列布局。它允许元素在容器内部自动调整大小和位置。关键属性包括`...
- **流式布局**:使用百分比单位让元素随屏幕尺寸变化而变化。 - **Flexbox响应式布局**:利用Flexbox的特性实现自适应布局。 - **Grid响应式布局**:利用CSS Grid布局实现更复杂的响应式布局。 #### 六、高级布局...
- 移动优先和流式布局策略,确保页面在不同设备上的良好显示。 8. **浏览器兼容性**: - 不同浏览器可能对某些CSS特性支持程度不同,需要了解各浏览器的兼容性表,并使用前缀(如-webkit-)来保证在旧版本浏览器...
而CSS则通过设置margin、padding、display属性等来控制元素的位置和尺寸,实现基本的布局方式,如流式布局、网格布局和盒模型布局。 在JS的世界里,我们可以利用DOM(文档对象模型)来动态地修改HTML元素的属性,...
- **流式布局(Fluid Layouts)**:使用百分比单位创建可适应屏幕大小的布局。 - **断点(Breakpoints)**:在特定屏幕尺寸下更改布局。 以上知识点涵盖了从传统布局到现代布局的各种方法。学习并熟练掌握这些...
- **流式布局**:元素按照从左到右的顺序排列,适用于不同屏幕尺寸的响应式设计。 - **固定布局**:元素的宽度和高度设定为固定像素值,适合屏幕尺寸相对固定的场景。 - **网格布局**:将页面划分为多个网格,...
在创建瀑布流布局时,我们需要在WXML中定义容器和元素的结构,然后在WXSS中设置相应的样式来实现流式布局。 2. **CSS Flex布局**:微信小程序中的WXSS支持CSS3特性,因此我们可以利用Flex布局来创建瀑布流。通过`...
在网页设计中,经常遇到一种布局需求:左右两侧的元素宽度固定,而中间的元素则根据屏幕大小...表格布局兼容性好,但不适合复杂的流式布局;弹性布局和网格布局提供了更强大的布局能力,但可能需要考虑兼容性问题。
1. **流式布局(Fluid Layout)**:流式布局使页面元素随着浏览器窗口大小的变化而自适应调整,确保在不同设备上都有良好的显示效果。JavaScript可以用来实时计算元素的尺寸,实现完全的响应式设计。 2. **网格布局...
通常,这涉及到流式布局(如网格系统)或百分比宽度的应用,使得控件能够自动地在达到容器边界时换行。 2. 实现方式: - CSS Flexbox:Flexbox是一种现代的布局模式,可以轻松实现控件的自适应换行。通过设置`...
通过设置`div`的宽度、高度、边距和内边距,可以创建各种复杂的布局模式,如网格系统、流式布局、定位布局等。 滑动表格(通常称为滚动表格或滚动条)是网页设计中的一种常见功能,特别是在数据量大或者需要在有限...
常见的布局模式有流式布局、网格布局和响应式布局。 - **定位技巧**:使用`position`属性(static, relative, absolute, fixed)可以实现元素相对定位,结合`top`, `right`, `bottom`, `left`属性进行精确调整。 -...
`则让元素相对于浏览器窗口定位,即使滚动页面,元素也会保持在屏幕的特定位置。 此外,CSS的Flexbox(弹性盒模型)和Grid(网格布局)也是现代网页布局的重要工具。Flexbox适用于一维布局,如导航栏、卡片式布局等...
使用display属性(如block、inline-block、flex、grid)来调整元素的显示方式,创建流式布局、网格布局等。 DW模板是预设计好的网页结构,可以帮助开发者快速搭建页面。"div+css单页布局实例dw模板下载"可能包含了...
学习CSS,你需要理解选择器、盒模型、布局方式(如流式布局、网格布局、Flex布局和Grid布局)、响应式设计以及CSS预处理器(如Sass、Less)等概念。 “JS特效”指的是使用JavaScript语言实现的各种视觉效果。...
2. **流式布局(Fluid Layouts)**:流式布局使用相对单位(如百分比)而不是绝对单位(像素)来定义元素尺寸,使布局可以根据屏幕大小变化而灵活调整。这样,无论屏幕大小如何,内容都能保持适当的比例。 ```css ....
当屏幕尺寸变化时,页面会出现滚动条,以适应内容。静态布局的优点在于代码简洁,易于编写,且兼容性良好。缺点则在于不能根据屏幕尺寸自适应调整,可能导致在不同设备上显示效果不佳。 2. 定位布局:通过CSS的`...
这通常包括流式布局、弹性图片和媒体查询的应用。 学习并熟练掌握这些CSS定位技术,将有助于Web设计师和开发者创造出更加精美、功能丰富的网页。同时,持续关注CSS的新特性(如Grid和Flexbox的最新改进),将使你的...
1. **流式布局(Fluid Layout)**:这种布局方式允许页面内容根据浏览器窗口大小自动调整,提供了一种响应式的用户体验。JavaScript可以用来检测窗口大小变化,并相应地调整元素尺寸。 2. **网格布局(Grid Layout...
1. **流式布局**:Pinterest网格采用瀑布流式设计,使得每个单元格可以自适应不同的屏幕尺寸,自动调整其宽度和高度,以充分利用空间。 2. **多列布局**:在大屏幕上,网格可能包含多列,而在小屏幕上则变为单列,...