上一篇文章已經貼上了換膚後的界面，今天講解下換膚功能是如何實現的。

大體上和切換語言一樣的實現 但考慮的會更多些 先貼換膚代碼

//換膚按鈕 TaoIconButton{ id:skinbtn; hoverEnabled: true; icon.position: TaoPosition.Only; icon.type: TaoIconType.SVG; icon.source: "qrc:/res/skin.svg"; background.radius: width / 2; background.color: "#C84A46" background.visible: state === "hovering" || state === "pressed"; scale: state === "pressed" ? 1.1 : 1; onClicked: themePopover.openToGlobal(skinbtn,0,50); } //點擊換膚按鈕後的展示菜單 TaoPopoverMenu{ id:themePopover; TaoPopoverElement{ text: qsTr("Default") otherData: ""; iconSource: TaoThemeManager.appThemeInvalid ? TaoAwesomeType.FA_check_circle_o : TaoAwesomeType.FA_circle_o } TaoPopoverElement{ text: qsTr("Solarized") otherData: "Solarized"; iconSource: TaoThemeManager.appTheme === otherData ? TaoAwesomeType.FA_check_circle_o : TaoAwesomeType.FA_circle_o } TaoPopoverElement{ text: qsTr("Dark") otherData: "Dark"; iconSource: TaoThemeManager.appTheme === otherData ? TaoAwesomeType.FA_check_circle_o : TaoAwesomeType.FA_circle_o } //換膚内容初始化 Component.onCompleted: { var list = TaoThemeManager.themeList; for(var i in list){ var obj = elementComponent.createObject(themeMenu); obj.otherData = list[i].name; obj.text = list[i].name; addElement(obj) } } Component{ id:elementComponent TaoPopoverElement{ otherData: ""; iconSource: TaoThemeManager.appTheme === otherData ? TaoAwesomeType.FA_check_circle_o : TaoAwesomeType.FA_circle_o } } onTriggered: { LocalConfig.skinName = modelData.otherData; TaoThemeManager.appTheme = modelData.otherData; } }

TaoThemeManager 中appTheme改變自動加載新的皮膚配置文件 在qml元素中定義顔色時使用qml注冊的自定義對象的值 實現類似翻譯的操作就不列舉細節了

效果如下截圖

圖片通用性不好 不建議在換膚配置裡設置 也不便于樣式拓展，并且可以通過程序代碼繞過不同皮膚使用不同圖标的功能 使用svg圖片就不會影響。

比如按照程序模闆自定義皮膚配置 相當于可以單獨再實現一個所見即所得的皮膚制作工具 ，當有新的皮膚時可以少量修改代碼或者前期考慮一個加載皮膚配置文件操作 後期都不用修改代碼 但考慮新增皮膚的可能性小可以不考慮

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!