【问题标题】:Flex 4.6 CSS vgroup "gap" ignoredFlex 4.6 CSS vgroup“间隙”被忽略
【发布时间】:2012-02-10 23:17:31
【问题描述】:
<?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"     
           >
    <fx:Style>    
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|VGroup {
            gap: 150;
            left: 30;
        }
    </fx:Style>
    <s:VGroup>
        <s:Label text="text1" />
        <s:Label text="text1" />
    </s:VGroup>
</s:Application>

假设 VGroup 距离左侧 30 像素(这是我使用该样式的证明) 但它忽略了给定的差距。当我将 'gap="150"' 直接输入 VGroup-Element 时,它可以工作。那么为什么在通过 css 时会忽略这一点呢?

感谢您的任何提示。

cu,马库斯

【问题讨论】:

    标签: css apache-flex flex-spark gaps-in-visuals


    【解决方案1】:

    因为gap 是 VGroup 类的“属性”,而不是样式。此属性只是VerticalLayout#gap 属性的包装器。

    如果您使用 FlashBuilder,您可以在建议列表中看到两者之间的区别。属性表示为绿色圆圈。样式显示为蓝色的“俄罗斯方块”形状。

    edit Left 也是一个属性,但它仍然会被应用。原因是在旧版本的 Flex SDK 中,baselinetopbottomleftrighthorizontalCenterverticalCenter 是作为样式实现的。所以你仍然可以使用它们的原因是向后兼容性。

    【讨论】:

    • 谢谢!这引出了另一个问题:gap 是某种样式属性,因为它会影响视觉印象并且与数据分组无关。因此,如果我想通过编写 css 文件来严格划分数据+逻辑和可视化配置 - 我该如何处理他的?如果 vgroup 是可换肤的,我可以编写一个 skinclass 并引入一个自己的 css 值并读取它的值以通过 skinclass 中的 actionscript 手动设置它。
    • @MarkusRossler 再想一想:VGroup 本身定义了一个可以被视为样式的垂直布局。您不能通过 CSS 完成所有事情,我个人认为如果可以的话,您的 CSS 文件会变得不可读。 Spark 架构中的想法是创建包含布局和图形信息的皮肤类,您可以通过其skinClass 样式将其分配给视图。
    • 再次感谢您!通过它,我将使用 BasicLayout 解决这个问题,通过 css 放置每个标签。我个人不明白应该通过 css 设置哪些样式以及不应该设置哪些属性的边界线。但是我们不需要在这里讨论这个。 :-) 再次感谢您!