如何管理子组件的样式? [英] How to manage styles for child components?

问题描述

如何为自定义 Flex 组件定义默认样式? 是一个好的开始，但我想创建自定义样式用于包含其他组件的自定义组件.

How does one define a default style for a custom Flex component? was a good start, but I want to create custom styles for my custom component which contains other components.

自定义组件是一个 Canvas.它包含其他画布、按钮、列表等.我不希望子组件使用与父组件相同的值，并且我希望有一些样式值跳转"父组件并且只影响特定的子组件(不是全部).

The custom component is a Canvas. It contains other Canvases, Buttons, Lists, etc. I do not want to have the child components use the same values as the parent component, and I want to have some style values "jump" the parent component and only affect a specific child (not all of them).

我想要一个单一的 CSS 定义，其中包含父组件和每个子组件的值，而不是每个子组件的单独样式.

I would like to have a single CSS definition with values for the parent and each of the subcomponents rather than a separate style for each.

我可以在 CSS 文件中设置实际上不是标准 CSS 的样式值吗(例如 buttonCornerRadius、mainPaneBackgroundColor、actionBitmap)?

Can I have style values in the CSS files that are not actually standard CSS (e.g. buttonCornerRadius, mainPaneBackgroundColor, actionBitmap) ?

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

Where should I propagate the styles to the child components? this.updateDisplayList() ?

我如何知道值是否通过 setStyle 更改或加载新的 CSS 文件(因为 StyleManager 没有事件)?

How would I know if the values changed via setStyle or loading a new CSS file (as StyleManager does not have events) ?

谢谢

推荐答案

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

The more granular way would be to add CSS to each child, but this is a maintenance and readability nightmare.

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

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

A less granular way would be to create each child as a Class, and add CSS to each Class file, but this still isn't wonderful.

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

You could also set the styles for each type of child component (List, ComboBox, Button, et al) in a master CSS:

List {
    dropShadowEnabled: true;
    paddingTop: 10;
}

但是，如果您要为相同类型的组件使用不同的样式，您有几个选择.

However, if you will have different styles for the same type of components, you have a couple options.

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

You could give each child a styleName, and then set the styles in the master 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 中引用该类.

Or, you could create each child as a custom Class, and then reference the Class in a master 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";
}

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

This method is especially useful if you building components dynamically, or reuse specific types of components. I use this method a lot, especially since these custom Classes can also contain Class-specific business logic.

这篇关于如何管理子组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！