65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Flex 容器 – 技巧和参考

Holly Schinsky
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2011 年 4 月 18 日

CPOL

5分钟阅读

viewsIcon

19821

本文旨在为开发人员提供一个快速参考指南，介绍如何使用 Flex 4 容器和布局。

尽管 Flex 4 容器和布局并非复杂问题，但它们似乎确实让许多人感到沮丧，尤其是那些刚开始使用 Flex 的人。代码经常会包含过多的嵌套容器和不必要的属性，这些属性毫无用处，因为开发人员可能不了解如何正确使用它们。

下面总结了 Flex 4 容器及其一些通用信息，包括它们是否可着色、如何使其滚动等。最小尺寸和默认尺寸也很重要，因为它们会影响子项的对齐。请注意，Basic 布局等同于 Flex 3 的绝对布局。

screen-shot-2010-09-17-at-3-11-55-pm.png

  • 默认情况下，Flash Builder 会创建一个最小宽度和最小高度分别为 955 和 600 的应用程序。您可以通过转到 Flash Builder 偏好设置并删除文件模板中的 minSize 变量来更改此设置。转到 Flash Builder | Preferences | Flash Builder | File templates | MXML Web Application。选择“Edit…”并从模板中删除 ${min_size}，然后按“Ok”。
  • 以上所有 Spark 容器都可以直接包含 GraphicElements（形状、FXG 等）和 VisualElements（UI 控件）作为直接子项。并非所有 MX 容器都具备此特性。
  • 某些容器支持嵌套布局标签来覆盖上述默认设置（将 layout 标签作为子项包含）。允许您嵌套布局的容器包括：Application、BorderContainer、Group、Panel 和 SkinnableContainer。

Layouts

当概念通过视觉方式呈现时，通常更容易快速理解（正如他们所说，一图胜千言）！下面是 Justin Shacklette 和 Gilles Guillemin（他们拥有 FlexLayouts.org）的一些图片，它们极大地帮助解释了 Flex 4 中不同的默认布局。它们还展示了 padding、horizontal/verticalAlign 和 gap 等属性的应用方式。您可以从 这里 下载参考 PDF。同时，也请查看他们酷炫的自定义 Flex 4 布局！

\

screen-shot-2010-09-17-at-3-26-50-pm.png

screen-shot-2010-09-17-at-3-58-57-pm.png

screen-shot-2010-09-17-at-3-59-20-pm.png

在 Group 中滚动

与 Flex 3 相比，Flex 4 的滚动方式大不相同，因为滚动功能并非内置于组件中。滚动 Group 的最佳实践是**将其（或 HGroup/VGroup 等）包装在 Spark Scroller 对象中**。Scroller 的关键在于**将其宽度和高度设置为您希望可见的内容的大小**。您还可以设置滚动位置，以在该范围内显示当前位置的内容。如果未设置宽度/高度，或者将其设置为大于内容的值，则滚动条将永远不会出现。例如，考虑以下代码，以及显示无滚动条的结果（因为宽度和高度等于图像大小）。如果从 Scroller 对象中完全省略宽度/高度，也会出现相同的结果。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
                               minWidth="955" minHeight="600">
	<s:Scroller width="300" height="300">
		<s:Group>
			<mx:Image width="300" height="300"
					  source="@Embed(source='logo.png')"/>
		</s:Group>
	</s:Scroller>
</s:Application>

screen-shot-2010-11-12-at-7-22-47-pm.png

现在，在以下代码中，图像的一半将垂直显示，并带有一个垂直滚动条，允许另一半图像滚动。由于默认情况下高度将根据内容高度进行调整，因此不会添加水平滚动条。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
                              minWidth="955" minHeight="600">
	<s:Scroller width="150">
		<s:Group>
			<mx:Image width="300" height="300"
					  source="@Embed(source='logo.png')"/>
		</s:Group>
	</s:Scroller>
</s:Application>

screen-shot-2010-11-12-at-7-20-04-pm1.png

滚动 Skinnable Container

建议对 skinnable 容器（包括 Spark Application、BorderContainer、NavigatorContent、Panel 和 Window）**将 Scroller 对象添加到 skin 类中，放在 contentGroup Group 对象周围**。以下代码片段摘自自定义 SkinnableContainer MXML skin，展示了如何实现这一点。

<s:Scroller width="100%" height="100%">
	<s:Group id="contentGroup"  minWidth="0" minHeight="0" />
</s:Scroller>

另一种方法是在代码中将 Scroller 和 Group 嵌套在内容周围，作为第一个子项，但首选方法是将其保留在 skin 类中。有关滚动和容器的更多详细信息，请参阅 此链接。

布局指南

  • 如果对象的容器具有**基本或绝对布局**，请使用 left、right、top、bottom、horizontalCenter、verticalCenter 等约束来确定其位置。
  • 如果对象的容器具有**垂直或水平布局（通过 layout 标签或使用 HGroup/VGroup）**，请使用 horizontalAlign、verticalAlign、gap、paddingTop、paddingBottom、paddingLeft、paddingRight 属性来控制子项及其周围的空白。这些属性不能与基本/绝对布局一起使用。

请注意以下代码和截图，其中两个容器分别指定了不同的布局和属性，但显示结果相同。

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	<!-- Container 1 has a BasicLayout (default) and uses constraints on the 
             label itself placement -->
	<s:SkinnableContainer id="c1" backgroundColor="0x000000" color="0xFFFFFF" 
             width="420" height="200">
		<s:Label horizontalCenter="0" top="30"
		text="Basic Layout using constraints on the object itself for layout."/>
	</s:SkinnableContainer>
	<!-- Container 2 has a VerticalLayout with align and padding
             properties set on it for label placement -->
	<s:SkinnableContainer id="c2" backgroundColor="0x000000" color="0xFFFFFF" 
             width="420" height="200" >
		<s:layout>
			<s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
		</s:layout>
		<s:Label 
         text="VerticalLayout that specifies where the label is placed with properties."/>
	</s:SkinnableContainer>
</s:Application>

screen-shot-2010-11-09-at-9-57-52-pm1.png

  • 要在具有**水平/垂直布局（或 HGroup/VGroup）**的容器中**居中子项**，请使用 horizontalAlign=”center” 和 verticalAlign=”middle”。
  • 要在具有**基本或绝对布局**的容器中**居中组件**，请在要居中的组件上使用 horizontalCenter=”0″ 和 verticalCenter=”0″。

请注意以下关于居中的两个代码示例，它们显示了完全相同的结果。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	<s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/>
</s:Application>

结果

screen-shot-2010-11-09-at-10-52-43-pm.png

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:BorderContainer borderColor="red" borderWeight="5" width="300" 
             height="300" horizontalCenter="0" verticalCenter="0"/>
</s:Application>

结果（请注意，这与上面的结果相同）

screen-shot-2010-11-09-at-10-22-32-pm.png

通用技巧

  • 总的来说，**优先使用约束**而不是使用 x、y 值进行绝对定位，因为约束会随着浏览器的缩放而动态调整。现在，这一点变得更加重要，因为许多人正在开发跨平台应用程序，用于 Web、桌面、移动、平板设备等，这些设备的屏幕尺寸差异很大。
  • 请使用 left/right 或 horizontalCenter 属性，但不要同时使用两者，因为它们会相互冲突，而且是不好的做法。
  • 出于与上面相同的原因，请使用 top/bottom 或 verticalCenter 属性。

重要提示：如果不确定使用哪个属性，请切换到 Design 视图，查看属性面板中可用的选项。它会根据所选组件和容器布局而变化，是检查您正在做的事情的绝佳方法。

属性快速摘要

screen-shot-2010-09-17-at-1-30-33-pm.png

有关此主题的更多信息，请查看以下链接：

© . All rights reserved.