本文档主要介绍了在Flex 4中如何自定义组件的外观,特别是通过CSS来填充按钮背景。提供了具体的代码示例,并探讨了Flex中的CSS使用。 在Flex 4中,我们可以利用CSS(层叠样式表)来定制组件的外观,使其更加符合应用程序的设计需求。CSS是一种强大的样式描述语言,常用于Web开发,它允许我们将界面设计与程序逻辑分离,以实现更好的控制和灵活性。 13.1 式样与皮肤 在Flex中,式样(Styles)和皮肤(Skin)是两个关键概念,用于定义组件的视觉表现。CSS在Flex中的应用使得界面美化变得更加便捷。 13.1.1 Flex CSS简介 Flex中的CSS遵循W3C标准,允许我们用CSS来呈现应用程序界面。CSS可以定义字体大小、颜色、布局等样式,使Flex组件的外观更具可定制性。 1. **样式名** - **自定义样式名**:以"."开头,如`.myStytle`,用于创建自定义的样式类。 - **组件名作为样式名**:例如`s|Button`,直接作用于Spark Button组件,设置其颜色。 - **组件id作为样式名**:使用"#"前缀,如`#okButton`,针对特定组件id设置样式。 - **分组样式名**:使用逗号分隔,如`.myStyle, s|Button`,将样式应用到多个组件。 - **全局选择器**:使用`global`关键字定义的样式会应用于所有组件,除非组件有特定的样式覆盖。 2. **属性** Flex中的样式属性包括字体大小、颜色、边距等,它们可以直接在组件上设置,也可以在CSS中定义。例如,全局字体大小和颜色可以通过`global { fontSize: 15; color: #ff00ff; }`进行设定。 在提供的代码示例中,展示了如何用XML语法来定义一个填充按钮背景的Rect元素,它使用线性渐变填充。通过调整`GradientEntry`的颜色和alpha值,可以实现按钮在不同状态(正常、鼠标悬停、按下)下的视觉变化。 这个例子展示了Flex 4中自定义组件外观的一种方法,即通过嵌入式XML CSS语法来定义组件的样式和皮肤。通过深入理解并熟练运用这些技术,开发者能够创建出更加独特和吸引人的用户界面。
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/082ccf8ae78d49c383834df273e6e958_weixin_42202716.jpg!1)
- 粉丝: 19
- 资源: 2万+
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 中国微型数字传声器:技术革新与市场前景
- 智能安防:基于Hi3515的嵌入式云台控制系统设计
- 手机电量低时辐射真增千倍?解析手机使用谣言
- 56F803型DSP驱动的高精度大功率超声波电源控制策略研究
- ARM与GPRS结合的远程监测系统设计
- GPS与RFID技术结合的智能巡检系统设计
- CPLD驱动的低功耗爆炸场温度测试系统设计
- 基于FPGA的智能驱动控制系统:可扩展设计与工业网络协议
- 基于ATmega128和CH374的嵌入式USB接口设计
- 基于AT89C52的温度补偿超声波测距仪:高精度设计与应用
- MSP430F448单片机在交流数字电压表中的应用
- 提升变频器应用效率的12项实用技巧
- STM32F103在数字电镀电源并联均流系统中的应用
- PSpice仿真下的升压开关电源设计:拓扑分析与CCM稳定性提升
- 轻巧高效:MSP430主导的低成本无线传感器网络节点设计
- FPGA在EDA/PLD中实现LVDS接口的应用解析
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)