QT使用教程：如何從設(shè)計(jì)工具中導(dǎo)入Qt Bridge

---

Qt是目前最先進(jìn)、最完整的跨平臺(tái)C++開發(fā)工具。它不僅完全實(shí)現(xiàn)了一次編寫，所有平臺(tái)無差別運(yùn)行，更提供了幾乎所有開發(fā)過程中需要用到的工具。如今，Qt已被運(yùn)用于超過70個(gè)行業(yè)、數(shù)千家企業(yè)，支持?jǐn)?shù)百萬設(shè)備及應(yīng)用。

點(diǎn)擊下載QT最新試用版

為了在使用Qt Bridge for Adobe Photoshop將設(shè)計(jì)從Adobe Photoshop導(dǎo)出到Qt Design Studio時(shí)獲得最佳結(jié)果，請(qǐng)?jiān)谑褂肞hotoshop時(shí)遵循以下準(zhǔn)則：

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

如果您想使用Adobe Illustrator創(chuàng)建圖稿，則可以將作品作為智能對(duì)象復(fù)制粘貼到Adobe Photoshop 。然后，您可以在Photoshop中雙擊智能對(duì)象，以在Illustrator中將其打開以進(jìn)行編輯。因?yàn)槭褂玫氖侵悄軐?duì)象，所以所有更改都會(huì)傳播到Photoshop中設(shè)計(jì)中使用的對(duì)象的所有實(shí)例。

要在Qt Design Studio中也使用在Photoshop中使用的字體，需要將它們加載到Qt Design Studio中。預(yù)覽UI時(shí)，Qt Design Studio會(huì)將它們部署到設(shè)備上。有關(guān)更多信息，請(qǐng)參見使用自定義字體。

使用畫板

從Adobe Photoshop導(dǎo)出設(shè)計(jì)并將其導(dǎo)入Qt Design Studio時(shí)，將保留畫板上的組和圖層之間的關(guān)系。

使用Qt Bridge for Adobe Photoshop導(dǎo)出設(shè)計(jì)時(shí)，您需要確定希望如何導(dǎo)出每個(gè)組或圖層：作為組件或子組件。組件是可以包含其他資產(chǎn)的單個(gè)QML文件。子項(xiàng)是單個(gè)PNG文件，可以在QML文件中使用。

如果您打算在UI中將作品的一部分用作單獨(dú)的圖像，請(qǐng)?jiān)诋嫲迳蠈⑺鼈冏鳛閱为?dú)的圖層進(jìn)行分組。然后，您可以將組導(dǎo)出為組件，并將其中的每個(gè)層導(dǎo)出為子級(jí)。子級(jí)將作為單獨(dú)的PNG文件導(dǎo)入Qt Design Studio，您可以將其用作圖像源。

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

將UI的不同部分（例如菜單和彈出窗口）放置在單獨(dú)的畫板上，以便能夠?qū)⑺鼈儗?dǎo)出為組件或子代并將其導(dǎo)入為QML和PNG文件，您可以將其拖放到Qt Design中的“ 表單編輯器”中創(chuàng)建UI時(shí)使用Studio設(shè)計(jì)模式。

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

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

導(dǎo)出作品

每個(gè)畫板都會(huì)自動(dòng)導(dǎo)出為組件。也就是說，一個(gè)單獨(dú)的QML文件包含畫板上的所有圖稿，但被設(shè)置為跳過或?qū)С鰹樽禹?xiàng)的圖層除外。您確定如何導(dǎo)出畫板中的每個(gè)組或圖層：作為組件或子項(xiàng)。此外，您可以將畫板的組和圖層作為一項(xiàng)合并到父級(jí)中，也可以完全跳過圖層。

默認(rèn)情況下，圖層導(dǎo)出如下：

• 一級(jí)組圖層被導(dǎo)出為畫板的子項(xiàng)。
• 二級(jí)組圖層將合并到其父級(jí)。
• 作品層將作為合并導(dǎo)出。
• 文本層始終導(dǎo)出為子項(xiàng)。

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

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

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

在Qt Design Studio 設(shè)計(jì)模式下，“ 庫”的“ QML類型”選項(xiàng)卡中列出了Qt Design Studio支持的QML類型。有關(guān)更多信息，請(qǐng)參見創(chuàng)建組件。

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

指定導(dǎo)出的設(shè)置

要使用Qt Bridge for Adobe Photoshop導(dǎo)出設(shè)計(jì)，請(qǐng)執(zhí)行以下操作：

1. Qt Bridge for Adobe Photoshop會(huì)自動(dòng)為您可以在QML ID字段中更改的所有組和圖層建議標(biāo)識(shí)符。ID必須是唯一的，它們必須以小寫字母或下劃線開頭，并且只能包含字母，數(shù)字和下劃線字符。有關(guān)更多信息，請(qǐng)參見id屬性。
2. 在“ 導(dǎo)出為”字段中，選擇組或圖層的導(dǎo)出類型：
   • 組件為選定的畫板，組或其中包含所有圖稿的圖層創(chuàng)建一個(gè)單獨(dú)的QML文件，但被設(shè)置為跳過或?qū)С鰹樽禹?xiàng)的圖層除外。
   • 子級(jí)為選定組或圖層的每個(gè)作品創(chuàng)建一個(gè)單獨(dú)的PNG文件，并引用了組件文件中的圖像。
   • 合并將選定的組和圖層作為一項(xiàng)合并到父級(jí)中。
   • 跳過完全跳過選定的圖層。

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

所有資產(chǎn)和元數(shù)據(jù)都將復(fù)制到您指定的目錄中。這可能需要一些時(shí)間，具體取決于項(xiàng)目的復(fù)雜性。

您現(xiàn)在可以在Qt Design Studio中創(chuàng)建一個(gè)項(xiàng)目，并將資產(chǎn)導(dǎo)入到其中，如創(chuàng)建項(xiàng)目和導(dǎo)入設(shè)計(jì)中所述。

清理文件

Qt Bridge for Adobe Photoshop允許從活動(dòng)文檔中刪除所有Qt Bridge for Adobe Photoshop相關(guān)的元數(shù)據(jù)。在“ Qt Bridge for Adobe Photoshop 設(shè)置”對(duì)話框中，選擇“ 清理文檔”以清理活動(dòng)文檔。清理成功后，文檔將不包含用于Adobe Photoshop的Qt Bridge相關(guān)元數(shù)據(jù)，并且用于Adobe Photoshop的Qt Bridge圖層設(shè)置將恢復(fù)為默認(rèn)值。

注意：清理是在內(nèi)存中完成的，必須保存文檔以保持清理狀態(tài)。

擴(kuò)展Qt Bridge for Adobe Photoshop

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

可覆蓋的JSX函數(shù)

您可以在替代JSX中定義以下函數(shù)。

• preExport（document）在導(dǎo)出文檔之前調(diào)用此函數(shù)。參數(shù)文檔是PSD文檔實(shí)例。此功能可用于在導(dǎo)出之前對(duì)文檔進(jìn)行臨時(shí)更改。
• postExport（document）導(dǎo)出文檔后調(diào)用此函數(shù)。參數(shù)文檔是PSD文檔實(shí)例。您可以撤消在功能preExport（...）中完成的臨時(shí)更改。
• customDefaultQmlId（name，instance）調(diào)用此函數(shù)以設(shè)置圖層的默認(rèn)QML ID。返回的值用于QML id。返回Falsey改用自動(dòng)生成的QML ID。參數(shù)名稱是插件自動(dòng)生成的QML ID，實(shí)例是PSD層實(shí)例。

注意：請(qǐng)參考Adobe Photoshop CC Javascript>腳本指南以了解對(duì)象模型以及Document和Layer>實(shí)例。

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