📌  相关文章
📜  Flex-皮肤样式

📅  最后修改于: 2020-10-25 02:23:41             🧑  作者: Mango

什么是剥皮？

  • Flex中的外观是完全自定义UI组件外观的过程。

  • 外观可以定义组件的文本，图像，过滤器，过渡和状态。

  • 可以将外观创建为单独的mxml或ActionScript组件。

  • 使用皮肤，我们可以控制UI组件的所有视觉方面。

  • 所有UI组件的定义皮肤的过程都是相同的。

第1步-创建皮肤

使用选项File> New> MXML Skin启动Create MXML Skin向导。

Flex皮肤向导

输入Package为com.tutorialspoint.skin ，名称为GradientBackgroundSkin，然后选择主机组件作为现有的Flex BorderContainer控件spark.component.BorderContainer 。

现在，您已经为BorderContainer创建了外观。修改mxml外观文件src / com.tutorialspoint / skin / GradientBackgroundSkin.mxml的内容。

更新填充层如下-

第2步：涂抹皮肤

您可以通过两种方式在组件上应用外观-

在MXML脚本中应用外观（静态）

使用其skinClass属性，将GradientBackgroundSkin应用于ID为mainContainer的BorderContainer。

在ActionScript中应用外观（动态）

使用其skinClass属性将GradientBackgroundSkin应用于ID为mainContainer的BorderContainer。

protected function gradientBackground_clickHandler(event:MouseEvent):void {
   mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}

Flex样式与皮肤示例

让我们遵循以下步骤，通过创建测试应用程序来查看Flex应用程序中的皮肤外观-

Step Description
1 Create a project with a name HelloWorld under a packagecom.tutorialspoint.client as explained in the Flex – Create Application chapter.
2 Create skin GradientBackgroundSkin.mxml under a packagecom.tutorialspoint.skin as explained above. Keep rest of the files unchanged.
3 Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
4 Compile and run the application to make sure business logic is working as per the requirements.

以下是GradientBackgroundSkin.mxml文件src / com / tutorialspoint / skin / GradientBackg roundSkin.mxml的内容。



   
   
   
      [HostComponent("spark.components.BorderContainer")]

以下是修改后的HelloWorld.mxml文件rc / com / tutorialspoint / client / HelloWorld.mxml的内容。

准备好所有更改后，让我们像在“ Flex-创建应用程序”一章中一样，以正常模式编译和运行应用程序。如果您的应用程序一切正常，它将产生以下结果：[在线尝试]

柔肤风格1

柔肤风格2