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

问题描述

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

自定义组件是一个Canvas。它包含其他画布，按钮，列表等。我不希望有子组件使用相同的值作为父组件，我想有一些样式值跳父组件，只影响特定的孩子（不是所有的）。

我想有一个单独的CSS定义，其中包含父元素和每个子元素的值，而不是每个元素的独立样式。

p>

可以在CSS文件中使用实际上不是标准CSS的样式值（例如buttonCornerRadius，mainPaneBackgroundColor，actionBitmap）？

<我应该在哪里传播样式到子组件？ this.updateDisplayList（）？

如何通过setStyle更改值或加载新的CSS文件（因为StyleManager没有事件）？

谢谢

解决方案

更详细的方法是将CSS添加到每个孩子，但这是一个维护和

 < mx：List dataProvider ={companies}dropShadowEnabled =truepaddingTop =10paddingBottom =10paddingRight =5paddingLeft =15backgroundColor =0xDFE8FF/> 
  

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

您也可以在CSS中为每种类型的子组件（List，ComboBox，Button等）设置样式：

 列表{
 dropShadowEnabled：true; 
 paddingTop：10; 
 
 
 
 
 
 $ b 
然而，如果你对同一类型的组件有不同的样式，有几个选项。 
 
 
 
您可以给每个孩子一个styleName，然后在CSS中设置样式： 
 
 
  CustomerSelectionForm.mxml：
 
<？xml version =1.0encoding =utf-8？> 
 < mx：List styleName =customerListdataProvider ={customers}/> 
< / mx：表格> 
 
 
 CompanySelectionForm.mxml：
 
<？xml version =1.0encoding =utf-8？> 
 < mx：List styleName =companyListdataProvider ={companies}/> 
< / mx：表格> 
 
 styles.css：
 
 .customerList {
 backgroundColor：0xDFE8FF; 
} 
 
 .companyList {
 backgroundColor：0x74ADE7; 
 
 
 
 
 
 $ b 
或者，您可以创建每个孩子作为自定义类，然后引用在CSS中的类。
  CustomerList.mxml：
 
 <？xml version =1.0 encoding =utf-8？> 
 < / mx：List> 
 
 CompanyList.mxml：
 
<？xml version =1.0encoding =utf-8？> 
 < / mx：List> 
 
 styles.css：
 
 CustomerList {
 backgroundColor：0xDFE8FF; 
} 
 
 CompanyList {
 backgroundColor：0x74ADE7; 
 
 
 
 
 
 $ b 
如果您动态构建组件，或者重用特定类型的组件。我使用这个方法很多，特别是因为这些自定义类也可以包含特定于类的业务逻辑。
 
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.

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).

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.

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

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

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

Thanks
解决方案
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"/>
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.

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. 

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";
}
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屋！