Flex4 beta 的 Spark 布局

简介:

Flex4 beta 的 Spark 布局
SPARK及HALO布局对比

和Spark架构的其他新特性一样,全新的布局一样是在强大的Halo布局的基础上发展而来的。Flex3开发者将会发现了解通用执行流程以及相应的API以及布局逻辑都是十分容易的 。然而,由于Spark更加注重模块化设计所以在一些地方还是有所不同与改进的。

相同的特性

对于使用MXML的开发者来说,没什么太大改变。像 width, height, minWidth, explicitWidth, 和 percentWidth 些属性以及相应的语法及语义都没有发生变化。仍然支持 left, right, top, horizontalCenter, 和 baseline 这些样式。

组件开发者同样会发现相似的元素。核心布局管理类以及组件生命周期都没有发生变化。 对于组件开发者来说三个十分熟悉的方法—commitProperties(), measure(), 和 updateDisplayList()—仍然被布局管理器以相同的顺序进行调用,并且失效规则也没有发生变化。

在 measure() 方法调用时组件依旧会设定默认的大小,同样,组件在 updateDisplayList() 方法被调用时依旧会为它的子元素设定大小。

显著的不同

也许最明显的布局不同之处就在于Spark布局从容器中分离出来了!当一个Spark容器调用 measure() 或 updateDisplayList() 时,测量和子元素的放置会交由一个Spark布局实例来完成。这种分离的模式带来了许多其他相关的新颖点:

布局逻辑被抽象在一个继承自LayoutBase类的单独类中,LayoutBase是Spark布局的最基础的类
全新的API被引入到Spark布局以及它测量、设值、摆放的元素中。这正是ILayoutElement接口的典型应用,并且支持2d和3d变换。如果你不创建自己的布局话,可能并不会注意到这个接口,但如果你这么做的话,你就会发现它是多么的高效。
布局 虚拟化—创建,销毁以及回收数据容器的项目渲染器完全交给DataGroup容器(Spark为数据容器所开发的基本构造块)来实现。Spark布局支持虚拟化相对比较容易是因为这一繁重的任务DataGroup负责完成了。
Spark容器的显示列表顺序与子元素顺序相分离。举例来说,第一个子元素可以被渲染呈现在最后一个子元素的上面
提升的新特性

Spark布局的改变致力于使整个系统更加模块化,功能更强大,更具扩展性。以下就是之前提到的Spark所带来的新特性以及改进的列表:

可设定的布局—因为布局逻辑与容器相分离,Spark容器可以被设定不同的Spark布局,即使是在运行的时候。这样减少了容器类的数量,同时提升了模块化以及代码的重用性。例如,在Spark中只有一个List类。为了获得Halo中TileList的功能,只需要为它制定 一个TileLayout实例即可。
自定义布局—伴随着布局逻辑与容器的分离,新的LayoutBase类以及ILayoutElement 接口允许开发者更快更容易的开发强大的布局,再将它们和Spark容器组合起来。
随意2D变换—Spark布局现在支持随意2D变换。这一功能被内置在ILayoutElement接口中,并且被所有的Spark容器子类所支持。这样一来使得开发支持2D变换的自定义布局变得不费吹灰之力。
像素平滑滚动—这一功能被DataGroup所支持,这样一来所有的Spark容器都将支持像素平滑滚动。在自定义布局中实现平滑滚动同样是轻而易举的事。
3D 支持—LayoutBase和ILayoutElement接口都支持3D。现在网络上已经出现了3D自定义布局的类,例如CoverFlow,Carousel,WheelLayout。
深度管理—开发者可以指定任意子元素的深度,无论在MXML中还是在自定义布局中。
后期布局变换—开发者可以指定 x, y, z, rotation, scale, 等属性而不会对布局产生任何影响。因为现在所有的Spark布局已经内置了2D变换支持,这一新特性十分实用。假如要做一个移上效果,当鼠标移动到水平布局的列表的一个缩略图上的时候,它会放大一点 或者3d旋转,但这并不会将其他的缩略图挤向右侧。
相容坐标空间—所有的大小属性如 width, height, measuredWidth, and measuredHeight 保持 一致的预变换。这样就消除了冲突如 "measure() 中 measuredWidth 是 unscaled, 但 updateDisplayList()却可以".
本文转自jiahuafu博客园博客,原文链接http://www.cnblogs.com/jiahuafu/archive/2010/05/24/1742811.html如需转载请自行联系原作者

jiahuafu

相关文章
|
10月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
304 1
|
10月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
583 0
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南:Flex多行布局详解
在现代移动应用开发中,流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度,在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表,重点关注多行布局与对齐策略的应用。
463 2
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐:从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中,Flex容器提供了强大而灵活的对齐系统,使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术,是构建专业级用户界面的关键。
437 0
|
UED 容器
5.HarmonyOS Next开发宝典:掌握Flex布局的艺术
Flex布局(弹性布局)是HarmonyOS Next中最强大的布局方式之一,它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示,还是复杂的自适应界面,Flex布局都能轻松应对。
387 0
|
开发者 容器
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
412 10
鸿蒙开发:弹性布局Flex
|
UED 容器
10.HarmonyOS Next布局进阶:嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中,Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器,我们可以创建复杂而灵活的界面结构,满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局,以及如何合理分配和控制空间。
434 0
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
1747 57
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。