css - 如何管理子组件的样式？

Question

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

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

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

我能否在 CSS 文件中使用实际上不是标准 CSS 的样式值(例如 buttonCornerRadius、mainPaneBackgroundColor、actionBitmap)？

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

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

谢谢

Answer 1

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

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

一种不太精细的方法是将每个 child 创建为一个类，然后将 CSS 添加到每个类文件，但这仍然不是很好。

您还可以在主 CSS 中为每种类型的子组件(List、ComboBox、Button 等)设置样式:

List {
    dropShadowEnabled: true;
    paddingTop: 10;
}

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

您可以给每个 child 一个样式名称，然后在主 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";
}

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