跳轉到主要內容

畫布視圖

畫布是用於構建應用圖形部件的視圖,它提供運行時介面外觀的視覺呈現。 這裡描述動態方面,如動畫和系統之間的相互作用。

TouchGFX Designer的畫布視圖

左側的側邊欄包含一個索引標籤控制項,可在screen& Custom Containers之間導航。

Screens & Custom Containers

“Screens ”選項卡和“Custom Containers”選項卡都包含樹狀結構,提供每個screen/custom container中小工具的總覽,通過點擊小工具名稱旁邊的V形標記,可以折疊樹狀中每個可能包含其他小工具的小工具。

如需更改screen/custom container和其中小工具的順序,可將它們拖放到其他螢幕、自訂容器和小工具之下或之上,也可通過widget order controls來更改。 更改小工具順序,決定將哪個小工具放在其他小工具之上。

對於屬於容器類型的小工具,可以為其添加子工具,方法是在樹狀檢視中將小工具拖放到其他小工具之上。 此外,還可以將小工具從一個螢幕拖放到另一個螢幕。

在點擊小工具的同時按住CTRL鍵可以選擇多個小工具。

點擊“+”按鈕可將Screens/Custom Containers添加到專案。 可以從Widget Menu將自訂容器添加到螢幕和其他自訂容器,可以在它們自己的名為“Custom Containers”的類別中找到它們。

此外,螢幕、自訂容器和小工具都可按右鍵呼叫功能表,您可以:

重新命名F2
刪除小工具DEL
複製CTRL + C
貼上CTRL + V
上移CTRL + F
下移CTRL + B
編輯原始檔案*

*只能用於螢幕和自訂容器

左側邊欄中的螢幕樹狀圖

畫布

視圖頂部包含Widget Menu,其中包含所有可用的小工具。

視圖中心包含畫布,顯示了當前選中的螢幕或自訂容器。

視圖底部包含各種控制項:縮放控制項內容修剪控制

畫布視圖中的畫布

小工具功能表

點擊小工具功能表中的“All widget group”選項卡或其按下其快速鍵 A 打開包含已分類的所有可用小工具的列表。 點擊特定的小工具組選項卡,打開該特定分類包含的可用小工具的列表。

點擊一個小工具,可將其添加到當前選中並顯示的螢幕或自訂容器的畫布上。

“All widget group”還包含一個搜索欄位,它採用模糊搜索技術,幫助用戶查找與搜索輸入匹配度最高的小工具。 最佳結果將highlight顯示。 舉例來說,由於使用模糊搜索,可以輸入“bwl”並得到“Button With Label”(帶標籤的按鈕),因為簡寫是其中一個因子。 在搜索欄位中輸入內容後,按下 Enter鍵 將高亮顯示的小工具插入畫布並關閉“小工具功能表”。

“畫布”視圖中的“小工具功能表”

小工具選擇

如上面的動畫所示,只需在畫布上點擊小工具即可選中它。 還可以多選,方法是在按住鍵盤上 Ctrl鍵 的同時按一下多個小工具。

小工具定位

如上面的動畫所示,可通過拖拽小工具的縮略圖來移動它和改變它的大小。

此外,還可以用方向鍵將選中的小工具移動1個像素。 在使用方向鍵的同時按住 Ctrl鍵 可以將選中的小工具移動10個像素。

小工具順序控制項

小工具的順序可通過“向前”和“向後”快捷方式進行調整,它們在“螢幕”或“自訂容器”樹中的順序也會隨之改變。

“向前”的觸發方式是按下 CTRL + F.

“向後”的觸發方式是按下 CTRL + B.

內容修剪控制

在畫布上,螢幕、自訂容器和容器類型小工具的子工具的邊界之外的小工具會被修剪。 內容修剪控制在完全修剪小工具和部分顯示小工具之間切換。

畫布視圖中的“顯示/隱藏修剪內容”控制

在下圖中,有一個一半位於螢幕邊界之外的方框,當內容修剪控制設置為顯示修剪過的小工具時,方框將不完全顯示,而是將邊界之外的部分去飽和。

顯示和隱藏修剪內容時方框小工具的外觀存在差異

歷史控制項

通過File Menu中的Edit功能,可以將在畫布上執行的修改歷史撤銷和重做。
系統記錄了每個螢幕和自訂容器的歷史,為了撤銷或重做在特定螢幕上執行的修改,該特定螢幕必須顯示在畫布上。

歷史控制項的另一種觸發方式是按下 CTRL + ZCTRL + Y.

縮放控制項

畫布的縮放水準可通過畫布底部的縮放控制項進行控制。

如需將畫布對中並恢復至100%縮放比例,點擊“Reset Canvas”按鈕。

畫布視圖中的縮放控制項

還可以使用下列快速鍵執行縮放:

縮放比例25%CTRL + 1CTRL + NUMPAD 1
縮放比例50%CTRL + 2CTRL + NUMPAD 2
縮放比例75%CTRL + 3CTRL + NUMPAD 3
縮放比例100%CTRL + 4CTRL + NUMPAD 4
放大CTRL + 滑鼠滾輪向上滾CTRL + '+'
縮小CTRL + 滑鼠滾輪向下滾CTRL + '-'
重置縮放比例CTRL + 0CTRL + NUMPAD 0

右側的側邊欄包含一個索引標籤控制項,可導航到當前選中小工具的Properties選項卡和畫布上當前看到的螢幕或自訂容器的Interactions選項卡。

Properties屬性

“Properties”選項卡將顯示當前選中的小工具/螢幕/自訂容器的屬性。 選中元件的名稱顯示在屬性清單的頂部。 名稱左側有一個圖示,將滑鼠懸停在該圖示上會顯示描述性文字,點擊該圖示將連結到該元件的文檔。

方框屬性

Interactions交互

“ Interactions”選項卡將顯示當前畫布上顯示的螢幕或自訂容器的交互。

點擊“+”按鈕可添加交互。

添加交互

Further reading