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，ComboBox，Button等）设置样式：

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;
}

如何管理子组件的样式？

2 个答案: