如何管理子组件的样式？

Question

How does one define a default style for a custom Flex component? 是一个好的开始，但我想为包含其他组件的自定义组件创建自定义样式。

自定义组件是一个 Canvas。它包含其他画布、按钮、列表等。我不想让子组件使用与父组件相同的值，并且我想让一些样式值“跳转”父组件并且只影响特定的子组件（不是全部）。

我希望有一个单独的 CSS 定义，其中包含父组件和每个子组件的值，而不是每个单独的样式。

我能否在 CSS 文件中包含实际上不是标准 CSS 的样式值（例如 buttonCornerRadius、mainPaneBackgroundColor、actionBitmap）？

我应该在哪里将样式传播到子组件？ this.updateDisplayList() ？

我怎么知道值是通过 setStyle 改变还是加载新的 CSS 文件（因为 StyleManager 没有事件）？

谢谢

Answer 1

更精细的方法是为每个孩子添加 CSS，但这是维护和可读性的噩梦。

<mx:List dataProvider="{companies}" dropShadowEnabled="true" paddingTop="10" paddingBottom="10" paddingRight="5" paddingLeft="15" backgroundColor="0xDFE8FF"/>

一种不那么精细的方法是将每个孩子创建为一个类，并将 CSS 添加到每个类文件中，但这仍然不是很好。

您还可以在主 CSS 中为每种类型的子组件（列表、组合框、按钮等）设置样式：

List {
    dropShadowEnabled: true;
    paddingTop: 10;
}

但是，如果您对同一类型的组件有不同的样式，您有几个选择。

您可以给每个孩子一个 styleName，然后在主 CSS 中设置样式：

CustomerSelectionForm.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:List styleName="customerList" dataProvider="{customers}" />
</mx:Form>


CompanySelectionForm.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:List styleName="companyList" dataProvider="{companies}" />
</mx:Form>

styles.css:

.customerList {
    backgroundColor: "0xDFE8FF";
}

.companyList {
    backgroundColor: "0x74ADE7";
}

或者，您可以将每个子类创建为自定义类，然后在主 CSS 中引用该类。

CustomerList.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:List>

CompanyList.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:List>

styles.css:

CustomerList {
    backgroundColor: "0xDFE8FF";
}

CompanyList {
    backgroundColor: "0x74ADE7";
}

如果您动态构建组件或重用特定类型的组件，此方法特别有用。我经常使用这种方法，特别是因为这些自定义类也可以包含特定于类的业务逻辑。

Answer 2

作为一名 Flex 组件开发人员，我尝试做 Flex 团队在框架中所做的事情：为您要单独设置样式的每个子项公开 styleName 样式。您甚至可以将它们链接在一起。作为直接来自框架的示例，ComboBox 的下拉列表样式为 dropdownStyleName，List 的垂直滚动条样式为 verticalScrollBarStyleName。

ComboBox
{
    dropdownStyleName: myComboDropdownStyles;
}

.myComboDropdownStyles
{
    backgroundColor: #c4c4ff;
    verticalScrollBarStyleName: myVScrollBarStyles;
}

.myVScrollBarStyles
{
    borderColor: #8686a4;
}