使用 CSS 设置 Flex 容器布局填充答案

【问题标题】：Set Flex container layout padding with CSS使用 CSS 设置 Flex 容器布局填充
【发布时间】：2012-12-19 00:24:44
【问题描述】：

有没有什么方法可以使用 Flex CSS 来设置这个 BorderContainer 的 padding？

<s:BorderContainer width="100%" height="100%">
   <s:layout>
      <s:VerticalLayout />
   </s:layout>

   <s:Label text="asdfasdf" />
</s:BorderContainer>

我试图避免添加额外的不必要的 VGroup。使用 CSS 设置填充无效。（我猜是因为 paddingLeft 不是 BorderContainer 上定义的样式。）

s|BorderContainer {
   paddingLeft: 10;
}

有没有办法用 CSS 修改布局的属性？我不想在很多地方硬编码填充。

【问题讨论】：

我不确定您要避免什么。如果要重用某个布局，请为 BorderContainer 创建自定义外观。如果它只是一次性的，我不明白你为什么不“硬编码”它。 paddingLeft 是LayoutBase 的属性，而不是样式。
@RIAstar 我们已经在整个应用程序中为 BorderContainer 使用了自定义外观，但它有几种不同的用途需要不同的填充。所有这些相似的用途都应该有相同的填充，所以我认为这是使用 CSS 的一个很好的例子。如果我将填充物放在皮肤中，我必须制作 3 个相似的皮肤，它们的布局仅不同。如果我将填充/布局放在我使用 BorderContainer 的每个地方，将来很难在应用程序中更改填充。
在这种情况下，为您的自定义皮肤添加自定义样式应该可以解决问题。唯一的缺点是：您不会获得 IDE 支持，因为主机组件不会知道您添加的样式；如果您尝试在 MXML 中设置样式，编译器会抛出错误，但这是您首先要避免的。
@RIAstar 看起来这是最好的主意。如果您将其作为答案提交，我会接受。

标签： apache-flex mxml

【解决方案1】：

您可以为 BorderContainer 的外观添加自定义样式。像这样的：

override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void {
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    var paddingLeft:* = getStyle('paddingLeft');

    elementToPad.left = paddingLeft;
    //or
    layoutToPad.paddingLeft = paddingLeft;
    //or
    elementToPad.setStyle('paddingLeft', paddingLeft);
    //depending on what kind of element you wish to pad
}

这样，您可以使用单个 Skin 类通过 CSS 应用不同的填充，并且可以避免代码重复。
唯一的缺点是：您不会获得 IDE 支持，因为主机组件不会知道您添加的样式；如果您尝试在 MXML 中设置样式，编译器会抛出错误，但这是您首先要避免的。

【讨论】：

【解决方案2】：

定义一个自定义样式，其中指定填充。

   .myCustomStyle { paddingLeft: 10;}

在代码中，使用styleManager获取该样式值并将其设置为垂直布局

    <s:layout>
         <s:VerticalLayout paddingLeft= "value got from the style manager"/>
   </s:layout>

【讨论】：

我认为这行不通。正如我所说：paddingLeft 是LayoutBase 的属性，而不是样式。
@RIAstar 我同意这一点。但假设我们从 css 中获取一个值并将其设置为属性。