QML工程化应用之一键换肤

Posted 2023-05-04

参考技术A 所谓换肤，就是改变页面中颜色值，使页面呈现出不同的色彩效果。

首先，将UCD提供的所有颜色值收集到一起，语义化定义到文件中，如下面的UIConfig.qml

其中，默认颜色定义在ctrlColor中，天蓝色主题定义在ctrlColorBlue中，海蓝色主题定义在ctrlColorSeaBlue中，这三个变量的内部结构都是一模一样的，颜色的定义最好语义化的定义在ctrlColor中，便于维护。不同主题除了颜色值不同以外，有时图标也会不一样，所以还收集了图标，分类定义在ctrlIcon中。ctrlColorDefault和ctrlIconDefault用来切换不同主题，初始化时将其赋值为默认主题颜色和图标。当主导航栏上换肤按钮触发主题currentTheme切换时，则ctrlColorDefault和ctrlIconDefault根据主题重新赋值。

接下来，介绍如何使用这些颜色值。在主页面声明：

在需要用到颜色值或图标的控件中直接引用即可，如：

property color normalTextColor: gUIConfig.ctrlColor.commonBtn.font.nor;

Rectangle

          id: rec;

          height: 30;

          width: 260;

          border.width: 1;

          border.color: gUIConfig.ctrlColor.conditionRec.border.nor;



这样就完成了一键换肤的功能。

VC中使用SkinMagic给你的软件换肤

1. 下载换肤软件SkinMagic包。URL：http://download.csdn.net/source/415381
2. Mfc换肤实例：http://download.csdn.net/source/418177
   
   
3. 将SkinMagicTrial.lib、SkinMagicTrial.dll和SkinMagicLib.h拷贝到项目根目录下，并在工程中添加；
   
   
4. 把Skins文件夹放在项目根目录下；
   
   
5. 建立一个MFC单文档项目；
   
   
6. StdAfx.h文件中 增加 #include "SkinMagicLib.h" ；
   
   
7. 在C**App类中打开InitInstance()函数，在函数其开始部分增加
    
   VERIFY( 1 == InitSkinMagicLib( AfxGetInstanceHandle(), _T("ReadUI") ,NULL,NULL ) );
     VERIFY( 1 == LoadSkinFile("Skins/corona.smf"));  
    VERIFY( 1 == SetDialogSkin( _T("Dialog") ) );
   
   
   
8. 在InitInstance()函数最后，但在以下代码之前，
    
   // The one and only window has been initialized, so show and update it.
    m_pMainWnd-> ShowWindow(SW_SHOW);
    m_pMainWnd-> UpdateWindow();
   
    加入如下代码
    
   VERIFY( 1 == SetWindowSkin(m_pMainWnd->m_hWnd ,  _T("MainFrame") ) );
   
   
   
9. 通过类向导给C**App增加ExitInstance() 函数，内容如下
    
   ExitSkinMagicLib();
    return CWinApp::ExitInstance();
   
   
   
10. 编译程序；即可运行成功。如图所示：