`

Flex 绝对布局 constraintColumns

    博客分类:
  • flex
阅读更多
为日后维护的简单话将使用flex提供的绝对约束布局来实现

页面主页面的样式布局

绝对约束布局的demo在svn(svn:..);

绝对约束布局解释说明:

绝对约束布局的好处

1. 绝对布局是flex提供的一种布局方式,绝对布局依然使用像素x y 的方式来进行

组件的布局,但是比原始的绝对布局更加容易维护。

2. 绝对约束布局构造组件布局的效率较高,使用这种方式要比组件嵌套组件的cup

性能高出很多,也是adobe推荐使用的方式。

3. 可以做到屏幕自适应。

绝对约束布局的简单描述:

1. 使用绝对约束布局和绝对布局一样,必须在布局容器中支持绝对布局, 如果是

Application 这样的既支持绝对布局又支持其他布局凡是的容器,先要设置其layout属性:

layout="absolute"

2. 在容器的根下使用flex提供的两个元素constraintRows 和 constraintColumns

使用的页面样例如下:

       <mx:constraintRows>

              <mx:ConstraintRow id="hero_panel_row" height="200"/>

              <mx:ConstraintRow id="main_padding_row" height="100%"/>

              <mx:ConstraintRow id="bottom_panel_row" height="200"/>

       </mx:constraintRows>

       <mx:constraintColumns>

              <mx:ConstraintColumn id="hero_panel_col" width="200"/>

              <mx:ConstraintColumn id="main_padding_left_col" width="200"/>

              <mx:ConstraintColumn id="main_col" width="0"/>

              <mx:ConstraintColumn id="main_padding_right_col" width="100%"/>

              <mx:ConstraintColumn id="map_panel_col" width="145"/>

       </mx:constraintColumns>

    以上的代码用自然语言的描述是这样的:

    我们在一个类似于canvas的绝对布局容器画行和列。constraintRows 表示画一种行。

    子元素表示每一行(ConstraintRow) 这是第一行,高度为200:

    <mx:ConstraintRow id="hero_panel_row" height="200"/>

    这是第二行,高度为100% <----这里注意.

    <mx:ConstraintRow id="main_padding_row" height="100%"/>

    然后是第三行,高度是200

    <mx:ConstraintRow id="bottom_panel_row" height="200"/>

    重点指出一下,我们把第一行和第三行的高度已经是按照像素的方式指定的很明确。

    无论容器的高度怎么改变,第一 、三行的高度都是固定的,200px。而第二行的

    高度是不固定的,他会根据容器的当前高度进行自动计算。假设:如果一个容器的

    高度是800, 那么,除去第1 ,3 行的400 , 第二行的高度就是400, 而如果

    容器的高度是600,那第二行的高度就变成200 了。 这种绝对约束布局总是先算

    给定好的绝对像素值,然后才按照百分比来计算其他的位置高度。

    以同样的方式来画布局容器中的列,意思不再赘述。

       <mx:constraintColumns>

              <mx:ConstraintColumn id="hero_panel_col" width="200"/>

              <mx:ConstraintColumn id="main_padding_left_col" width="200"/>

              <mx:ConstraintColumn id="main_col" width="0"/>

              <mx:ConstraintColumn id="main_padding_right_col" width="100%"/>

              <mx:ConstraintColumn id="map_panel_col" width="145"/>

       </mx:constraintColumns>

    到此,我们就在容器中画好了类似于excel那样的格子。虽然这些格子我们看不到,

    但是flex的compiler却已经明确知道他的意义是什么,并且会在内存中画好这些格子

    接下来我们做的就是只需要把每一个组件对其到那个格子或者那几个格子。

    3. 对齐组件到约束布局

    我们写一个自定义的组件并把它添加到容器。

    以下是一个组件:

    <components:HeroPanelView id="hero_panel"

       top="hero_panel_row:0" bottom="hero_panel_row:0"

       left="hero_panel_col:0" right="hero_panel_col:0"/>

    他的四个重要属性被使用:top, bottom , left , right .

    只是不是像就对布局那样只使用一个数值,而是要加前缀(contraint id)

    当让,也可以是组件不完全贴在容器上。 比如让底部 在相对应的格子底部上方5px的位置

    就可以这样写: bottom="hero_panel_row:5"

    以上几乎是约束布局的全部内容,虽然写起来并不那么容易,或者如果你初次见到可能还会

    觉得带来更多的工作量(不如flexBuilder当中提供的WYSIWYD的方式开发快) ,但会给将来

    代码的维护带来便利。建议使用这种方式。

    注意:如果你错把 bottom="hero_panel_row:0" 写成 bottom="hero_panel_col:0" 编译器

    是不会报错的。这里需要注意。
分享到:
评论

相关推荐

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

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

    flex移动布局,极简公共样式包,附demo

    在现代Web开发中,Flex布局(Flexible Box布局)已经成为创建响应式、动态和灵活的用户界面的标准工具。这个“flex移动布局,极简公共样式包”正是为了方便开发者快速构建适应不同屏幕尺寸的移动端应用而设计的。让...

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

    这个"基本布局_flex基本布局模板_flex_"项目旨在介绍和提供一个基础的Flex布局模板,帮助开发者理解和应用Flex布局。 首先,我们要了解Flex布局的核心概念。Flex布局是CSS3中引入的一种新的布局模式,它使得容器...

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

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

    flex弹性布局基本语法(修改版).pdf

    Flex 弹性布局基本语法 Flex 弹性布局是一种基于盒模型的传统解决方案,依赖于 display 属性 + position 属性 + float 属性。它可以简便、完整、响应式地实现各种页面布局。 开启 Flex 弹性盒子布局可以通过将元素...

    flex布局布局篇

    ### Flex布局基础知识点 #### Flex布局介绍 Flex布局,全称CSS Flexible Box Layout Module,简称Flexbox,是CSS3中一种新的布局模式。这种布局模式专门用于更高效地对齐、分布和排序容器中的项目,即使它们的大小...

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

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

    flex 弹性布局,最后一行数量不足一行 列表项目左对齐的解决办法

    flex 弹性布局,最后一行数量不足一行 列表项目左对齐的解决办法,经过实际测试,亲自有效,一行的数量可以随意设置。非常有用!

    微信小程序 - FlexLayout布局源码.zip

    微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip ...

    CSS的flex布局.ppt

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

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

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

    Flex布局让子项保持自身高度的实现

    在用了Flex布局会发现,当水平排列后,会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认: 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽,并把所有子项的高度变为最高子项的...

    微信小程序——FlexLayout布局(截图+源码).zip

    微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——...

    flex 页面布局教程

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

    微信小程序+Flex布局示例源代码

    在这个"微信小程序+Flex布局示例源代码"中,我们将深入探讨Flex布局在微信小程序中的应用。 Flex布局,全称为Flexible Box布局,是CSS3中的一种新的布局模式,旨在解决传统盒模型在处理复杂或响应式布局时的困难。...

    flex布局实战搭建网页页面

    在网页设计领域,Flex布局(Flexible Box Layout,也称为CSS3 Flexbox)是一种强大的工具,它使得构建响应式、动态调整的布局变得简单易行。本教程将带你深入理解Flex布局,并通过实例演示如何利用HTML和CSS搭建一个...

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

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

    flex弹性布局的理解。

    1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...

    Flex 布局变化时的动画效果解析 简单版

    Flex布局在Web开发中是一种非常重要的布局模式,它允许元素在容器中灵活地调整大小和位置,以适应不同屏幕尺寸和设备。在Flex布局发生变化时,例如元素的增删、大小调整或排列顺序改变,我们可能希望添加动画效果来...

Global site tag (gtag.js) - Google Analytics