QT使用教程：如何從設計工具中導入Qt Bridge

---

Qt是目前最先進、最完整的跨平臺C++開發工具。它不僅完全實現了一次編寫，所有平臺無差別運行，更提供了幾乎所有開發過程中需要用到的工具。如今，Qt已被運用于超過70個行業、數千家企業，支持數百萬設備及應用。

點擊下載QT最新試用版

為了在使用Qt Bridge for Adobe Photoshop將設計從Adobe Photoshop導出到Qt Design Studio時獲得最佳結果，請在使用Photoshop時遵循以下準則：

• 根據您在導出設計時所做的選擇，將您的作品安排到畫板中，并將其組織成組和圖層，并作為單獨的文件導入Qt Design Studio中。
• 使用“Type”工具確保所有文本標簽都導出到“ text”項目中。
• 以矢量格式存儲所有作品，以便能夠輕松調整它們的大小以適合不同的屏幕尺寸和分辨率。

如果您想使用Adobe Illustrator創建圖稿，則可以將作品作為智能對象復制粘貼到Adobe Photoshop 。然后，您可以在Photoshop中雙擊智能對象，以在Illustrator中將其打開以進行編輯。因為使用的是智能對象，所以所有更改都會傳播到Photoshop中設計中使用的對象的所有實例。

要在Qt Design Studio中也使用在Photoshop中使用的字體，需要將它們加載到Qt Design Studio中。預覽UI時，Qt Design Studio會將它們部署到設備上。有關更多信息，請參見使用自定義字體。

使用畫板

從Adobe Photoshop導出設計并將其導入Qt Design Studio時，將保留畫板上的組和圖層之間的關系。

使用Qt Bridge for Adobe Photoshop導出設計時，您需要確定希望如何導出每個組或圖層：作為組件或子組件。組件是可以包含其他資產的單個QML文件。子項是單個PNG文件，可以在QML文件中使用。

如果您打算在UI中將作品的一部分用作單獨的圖像，請在畫板上將它們作為單獨的圖層進行分組。然后，您可以將組導出為組件，并將其中的每個層導出為子級。子級將作為單獨的PNG文件導入Qt Design Studio，您可以將其用作圖像源。

要將畫板的內容用作UI中的單個圖像，可以在導出組和圖層時合并它們。導入期間，將內容壓平為一個PNG文件。合并的方式使您可以在Photoshop或Adobe Illustrator中更改組和圖層，然后再次導出和導入畫板。例如，這是一種創建最終用戶界面外觀的參考圖像的簡便方法。

將UI的不同部分（例如菜單和彈出窗口）放置在單獨的畫板上，以便能夠將它們導出為組件或子代并將其導入為QML和PNG文件，您可以將其拖放到Qt Design中的“ 表單編輯器”中創建UI時使用Studio設計模式。

Qt Design Studio提供了預定義的UI控件集，您可以根據需要進行修改。您可以將自己的控件導出為QML類型，Qt快速控件或Studio組件。控件的位置和尺寸被保留。

但是，如果希望UI控件（如復選框）看起來像在Photoshop中一樣，則必須在Artboard中創建控件，并在要創建控件實例的圖層中使用Artboard。Qt Bridge將控件導出為可在Qt Design Studio中編程的自定義QML組件。

導出作品

每個畫板都會自動導出為組件。也就是說，一個單獨的QML文件包含畫板上的所有圖稿，但被設置為跳過或導出為子項的圖層除外。您確定如何導出畫板中的每個組或圖層：作為組件或子項。此外，您可以將畫板的組和圖層作為一項合并到父級中，也可以完全跳過圖層。

默認情況下，圖層導出如下：

• 一級組圖層被導出為畫板的子項。
• 二級組圖層將合并到其父級。
• 作品層將作為合并導出。
• 文本層始終導出為子項。

Qt Bridge for Adobe Photoshop會自動為所有組和圖層提議標識符（QML id）。這些ID將在Qt Design Studio中用作文件名。您可以更改ID，以便可以在Qt Design Studio中輕松找到它們。請記住，這些ID必須是唯一的，并且它們必須遵循某些命名約定。

您可以使用默認設置導出，并稍后在Qt Design Studio中進行所有更改。如果您熟悉QML語法，則可以修改設置以在一定程度上調整生成的QML。例如，您可以指定要用于組件或圖層的QML類型或Studio組件。如果繪制了要進行動畫處理的路徑，則可以將其導出為Arc Studio組件，以避免在Qt Design Studio中將路徑圖像替換為Arc組件。或者，您可以將按鈕導出為Qt Quick Controls 2按鈕類型。

您可以指定要用于組或圖層的效果，例如模糊效果。

在Qt Design Studio 設計模式下，“ 庫”的“ QML類型”選項卡中列出了Qt Design Studio支持的QML類型。有關更多信息，請參見創建組件。

您還可以為QML類型的屬性指定值，或創建屬性別名以從其他屬性中獲取值。

指定導出的設置

要使用Qt Bridge for Adobe Photoshop導出設計，請執行以下操作：

1. Qt Bridge for Adobe Photoshop會自動為您可以在QML ID字段中更改的所有組和圖層建議標識符。ID必須是唯一的，它們必須以小寫字母或下劃線開頭，并且只能包含字母，數字和下劃線字符。有關更多信息，請參見id屬性。
2. 在“ 導出為”字段中，選擇組或圖層的導出類型：
   • 組件為選定的畫板，組或其中包含所有圖稿的圖層創建一個單獨的QML文件，但被設置為跳過或導出為子項的圖層除外。
   • 子級為選定組或圖層的每個作品創建一個單獨的PNG文件，并引用了組件文件中的圖像。
   • 合并將選定的組和圖層作為一項合并到父級中。
   • 跳過完全跳過選定的圖層。

1. 在“ As Artboard”字段中，選擇要重復使用的畫板。例如，您可以使用畫板定義一個組件（例如按鈕），然后在其他畫板上重用它。
2. 在“ QML類型”字段中，指定要將此層變形為的QML類型或Studio組件。生成的組件將屬于這種類型。例如，如果繪制了矩形，則可以將其導出為Rectangle Studio組件。您可以提供在“ Add Imports”字段中定義了QML類型的模塊的導入語句。
   
3. 在“ Add Imports”字段中，輸入其他導入語句，再將其添加到生成的QML文件中。例如，要使用Qt Quick Controls 2.3，則需要import語句QtQuick.Controls 2.3，要使用Qt Studio Components 1.0，則需要import語句QtQuick.Studio.Components 1.0。您也可以將模塊作為別名導入。
4. 在“ QML屬性”字段中，指定QML類型的屬性。您可以在Qt Design Studio中添加和修改屬性。
5. 選中“ 剪輯內容”復選框以啟用從圖層生成的類型中的剪輯。生成的類型會將其自己的繪畫以及其子代的繪畫剪裁到其邊界矩形。
6. 選中“ Create Alias”復選框，以將從該層生成的項目導出為父組件中的別名。
7. 選擇“ Cascade properties”以將當前屬性集應用于所選層的所有子級。
8. 選擇導出將資產復制到指定的導出路徑。
9. 導出完成后，選擇確定。

所有資產和元數據都將復制到您指定的目錄中。這可能需要一些時間，具體取決于項目的復雜性。

您現在可以在Qt Design Studio中創建一個項目，并將資產導入到其中，如創建項目和導入設計中所述。

清理文件

Qt Bridge for Adobe Photoshop允許從活動文檔中刪除所有Qt Bridge for Adobe Photoshop相關的元數據。在“ Qt Bridge for Adobe Photoshop 設置”對話框中，選擇“ 清理文檔”以清理活動文檔。清理成功后，文檔將不包含用于Adobe Photoshop的Qt Bridge相關元數據，并且用于Adobe Photoshop的Qt Bridge圖層設置將恢復為默認值。

注意：清理是在內存中完成的，必須保存文檔以保持清理狀態。

擴展Qt Bridge for Adobe Photoshop

您可以借助JSX腳本更改Qt Bridge for Adobe Photoshop的默認行為。可以在腳本中編寫特定功能，這些功能由Qt Bridge for Adobe Photoshop調用，并帶有有用的參數。

可覆蓋的JSX函數

您可以在替代JSX中定義以下函數。

• preExport（document）在導出文檔之前調用此函數。參數文檔是PSD文檔實例。此功能可用于在導出之前對文檔進行臨時更改。
• postExport（document）導出文檔后調用此函數。參數文檔是PSD文檔實例。您可以撤消在功能preExport（...）中完成的臨時更改。
• customDefaultQmlId（name，instance）調用此函數以設置圖層的默認QML ID。返回的值用于QML id。返回Falsey改用自動生成的QML ID。參數名稱是插件自動生成的QML ID，實例是PSD層實例。

注意：請參考Adobe Photoshop CC Javascript>腳本指南以了解對象模型以及Document和Layer>實例。

在“ Qt Bridge for Adobe Photoshop 設置”對話框中，選擇“ 替代JSX腳本”以設置替代JSX腳本。