更细化的方法是为每个孩子添加 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";
}
如果您动态构建组件或重用特定类型的组件,此方法特别有用。我经常使用这种方法,特别是因为这些自定义类也可以包含特定于类的业务逻辑。