作者 | 團長 仿真秀優秀講師
首發 | 仿真秀App
導讀：大家好，我是團長。 我們都是CAEer，我們也都是Coder。自從上一篇從零開始學ANSA二次開發：如何利用Designer搭建視窗(含安裝步驟)已經過去兩月整了。今天團長給大家講講ANSA二次開發中，那些正常視窗小部件使用技巧和方法。 在我們利用ANSA進行二次開發時，随着要管理的功能逐漸增多，就無法避免地要建立視窗界面來對這些功能進行管理。我們所熟知的ANSA的界面，其實就是一個非常複雜的界面。這些界面都有一個共同的名字： GUI，全稱是Graphical User Interface，即圖形使用者界面。 開發一個複雜的GUI需要非常專業的知識，架構、體驗、容差、實作等，工作内容有點類似于一個程式員+架構師+産品經理。聽起來有些複雜，但講簡單一點，也的确很簡單，無非是把一些視窗小部件在主視窗裡組裝起來而已。 是以本期，我們來說一說，常見的視窗小部件有哪些？ (本文主要根據ANSA的界面開發BCGUI展開，歡迎在仿真秀平台訂閱我ANSA二次開發進階教程) 本文目錄： 1、BCGUI的結構和哲學 2、小部件(widgets) 2.1、主視窗(BCWindow) 2.2、文本編輯器(BCLineEdit) 2.3、複選框(BCCheckBox) 2.4、下拉菜單(BCComboBox) 2.5、按鈕(BCPushButton) 2.6、可視框(BCFrame) 2.7、标簽(BCLabel) 2.8、滾動标簽(BCLabelTicker) 2.9、選值框(BCSpinBox) 2.10、分隔線(BCSeparator) 2.11、視窗大小更改框(BCStatusBar) 2.12、樹狀清單(BCListView) 2.13、清單資訊框(BCItemViewInfoBox) 2.14、部件堆棧(BCWidgetStack) 2.15、視窗拆分器(BCSplitter) 2.16、頁籤(BCTabWidget) 2.17、可編輯文本框(BCTextEdit) 2.18、文本浏覽(BCTextBrowser) 2.19、表格框(BCTable) 2.20、下拉菜單(BCPopupMenu) 2.21、向導框(BCWizard) 2.22、視窗擴充部件(BCWidgetExpand) 2.23、路徑框(BCLineEditPath) 2.24、計時器(BCTimer) 2.25、進度條(BCProgressBar) 3、布局欄(Layout) 3.1、布局框(BCBoxLayout) 3.2、布局網格(BCGridLayout) 4、項目(Items) 4.1、空白塊(BCSpacer) 4.2、清單項目(BCListViewItem 、BCCheckListItem) 5、一般說明 以下正文
1、BCGUI的結構和哲學 BCGUI實體分為3類：小部件(widgets)、布局(layouts)、項目(items)。 請大家先記住這麼幾個概念。我們接下來詳細展開了說。 2、小部件(widgets) 此類别包括使用者可見和可管理的所有重要GUI實體，例如視窗，按鈕，組合框等。其最重要的功能如下所述： 2.1、主視窗(BCWindow) 建立一個可以容納任何其他小部件(widgets)、布局(layouts)或項目(items)的視窗。它是BCGUI庫可以建立的最進階别的小部件。 2.2、文本編輯器(BCLineEdit) 建立一個單行文本編輯器。文本編輯器裡是可以進行文本輸入的。 2.3、複選框(BCCheckBox) 建立一個複選框。複選框右側帶有文本标簽，可用來訓示該選項的含義。複選框有兩個狀态：被選擇、未被選擇。 2.4、下拉菜單(BCComboBox) 建立一個下拉清單，并提供選項。下拉選項的内容可以使用者任意定義。被選項将顯示在表面。 2.5、按鈕(BCPushButton) 這是一個可以在單擊時執行操作的按鈕。執行操作的内容由按鈕控制的函數或者腳本指定。 帶有“BCLineEdit”，“BCCheckBox”，“ BCComboBox”和“ BCPushButton”的簡單“ BCWindow”如下所示：
2.6、可視框(BCFrame) 建立一個靈活的可視框，該可視框可以擷取多種陰影樣式，并可容納其他小部件。可視預設情況下沒有布局，是以必須在“ BCFrame”中設定布局。要在内部垂直或水準放置小部件，可以分别使用功能BCVBoxCreate或BCHBoxCreate。 2.7、标簽(BCLabel) 建立一個文本和圖檔顯示在界面。這個文本和圖檔都可以由使用者自己指定。該顯示僅做提示用。 2.8、滾動标簽(BCLabelTicker) 建立一個自動滾動标簽。當标簽的内容長于目前視窗大小時，标簽内容會自動滾動，以便使用者能逐漸看到完整的所有的内容。
2.9、選值框(BCSpinBox) 建立一個小部件，允許使用者選擇一個值(單擊向上/向下按鈕以增加/減小目前顯示的值，或者直接在其中鍵入值。) 2.10、分隔線(BCSeparator) 建立一根細直線來分隔各個視窗部件。 2.11、視窗大小更改框(BCStatusBar) 提供用于輕松更改BCWindow大小的選項。滑鼠置于此處可拖動更改視窗的大小。 下面顯示了使用BCFrame，BCSeparator，BCLabel，BCSpinBox，BCSlider和BCStatusBar的示例：
2.12、樹狀清單(BCListView) 建立一個清單/樹狀圖。它可以顯示和控制多列項目的層次結構，并可随時添加新的選項。 2.13、清單資訊框(BCItemViewInfoBox) 建立一個帶有三個标簽的水準框，放置在ListView或ItemView的底部，以提供有關總計、標明項目以及自定義文本的資訊。下圖顯示了PID視窗中的底部資訊欄的應用場景。
2.14、部件堆棧(BCWidgetStack) 建立一堆小部件，這些小部件在任何時候都僅有最頂部的部件可見。 2.15、視窗拆分器(BCSplitter) 建立小部件的視窗拆分器。該控件可以通過拖動子視窗小部件之間的邊界來控制子視窗小部件的大小。 在下圖中，“BCSplitter”将“BCListView”與“BCButtonGroup”分開。視窗的左下角有一個“BCWidgetStack”，其中包含不同的标簽小部件。從“BCListView”中選擇“ BCListViewItem”會在視窗小部件區域引發一個不同的“BCLabel”。例如，當選擇“首Preference 5”項時，包含文本“Preference 5 is selected.”的标簽(BCLabel)被提升到小部件堆棧的頂部。
2.16、頁籤(BCTabWidget) 建立一個頁籤，其中包含特定數量的标簽，并在标簽下方建立一個“頁面區域”。每個頁籤都與一個不同的頁面關聯。在頁面區域中僅顯示目前頁籤的頁面，其他所有标簽頁均被隐藏。 2.17、可編輯文本框(BCTextEdit) 建立功能強大的單頁富文本編輯器。“BCTextEdit”允許使用者執行各種操作，例如撤消/重做，用于複制，用于粘貼等。 在下圖中，我們建立了帶有2個“BCTabWidget”頁籤。每個頁籤下都包含一個“BCTextEdit”。點選Tab1可切換顯示Tab1下的内容，點選Tab2可切換顯示Tab2下的内容。
2.18、文本浏覽(BCTextBrowser) 為BCTextEdit提供超文本導航。 2.19、表格框(BCTable) 建立一個靈活的可編輯(類似于電子表格)的表格小部件。其他小部件也可以插入“BCTable”中。 下圖中示例建立了一個帶有垂直和水準标題的“ BCTable”。可以通過标題選擇行和列。
2.20、下拉菜單(BCPopupMenu) 建立選項的下拉菜單。 2.21、向導框(BCWizard) 建立一個典型的向導對話框視窗，其中包含自定義的頁面數。BCWizard的每個頁面都是一個BCFrame，可以包含任何其他小部件。使用者可以使用小部件的“後退”和“下一步”内置按鈕在BCWizard的頁面中來回移動。
2.22、視窗擴充部件(BCWidgetExpand) 它是一個用于節省表單空間的小部件。使用它可為視窗小部件提供擴充功能，而無需調整父視窗的大小。該類易于使用，并且在使用滾動條的小部件(例如“BCListViews”或“BCTextEdits”)中非常有用。按住“Shift”和滑鼠中鍵，将滑鼠拖到小部件需要擴充的方向。隻要滑鼠光标停留在小部件内，該小部件就會保持展開狀态。
2.23、路徑框(BCLineEditPath) 建立一個“ BCLineEditPath”，它也是一個“ BCFrame”，其中包含可編輯的曆史記錄“ BCComboBox”、“Browse”、“ BCToolButton”和“Clear history”、“ BCToolButton”。在使用ANSA的時候我們都可以通路這些路徑。BCLineEditPath中的内容可以是“檔案”，“檔案夾”或“所有内容”類型，并且可以與“打開”或“另存為”模式一起使用。
2.24、計時器(BCTimer) “BCTimer”提供計時器信号和單次計時器。下圖展示了一個計時器的使用場景。
2.25、進度條(BCProgressBar) 建立一個進度條，該進度條用于向使用者訓示操作的進度，并向使用者保證該應用程式仍在運作。
3、布局欄(Layout) 布局欄一般都是不可見的，但它卻可以控制所有可見小部件布局。 3.1、布局框(BCBoxLayout) “BCBoxLayout”是用于管理幾何圖形的最有用的工具之一。它由一個矩形框組成，該矩形框具有透明的外部邊框，可以為其子級(小部件或其他布局)指定水準或垂直方向。 布局框通常在小部件建立中用作父級。 3.2、布局網格(BCGridLayout) “BCGridLayout”布局将小部件布置在網格中。它占用可用空間，将其分為行和列，然後将其管理的每個小部件放入正确的單元格中。 BCLayouts用于在“BCWindow”内定義視窗小部件的位置。預設情況下，“BCWindow”具有垂直方向的“BCBoxLayout”。這意味着“BCWindow”或“BCBoxLayout”的所有子項都将根據其建立順序彼此放置。 在以下示例中，子級可以是小部件(“OK”和“Cancle”的BCPushButton)，也可以是其他布局(水準的“BCBoxLayout”和“BCGridLayout”)。
4、項目(Items) 4.1、空白塊(BCSpacer) 在布局中建立一塊空白。根據預設參數，它可以擴充到所有方向。在下面的例子中，一個空白塊被安置在BCSlider和BCStatus之間。
4.2、清單項目(BCListViewItem 、BCCheckListItem) 這兩項是“BCListView”構成内容。它們可能直接屬于“BCListView”(頂級項目)，如果允許其他的層次結構，它們也可能屬于其他布局。可以向其中添加可控制的小部件，例如“checkBoxes”，“comboBoxes”和“buttons”。 5、一般說明 遵循父子邏輯，使用BCGUI建立圖形界面可以包括上述任何小部件、布局或項目。這意味着BCGUI實體被構造為另一個子實體。以這種方式，可以容易地定義關系，定義每個實體的位置和依賴性。顯示、隐藏或銷毀父視窗小部件之類的操作會自動遞歸應用于其所有子項。 “BCWindow”是使用者可以在腳本中建立的最進階别的小部件(頂部父級)，它會自動設定為父級。 下面展示一個簡單的BCWindow的代碼：
import ansa from ansa import guitk w = guitk.BCWindowCreate("BCWindow Example", guitk.constants.BCOnExitDestroy) le = guitk.BCLineEditCreate(w,'please input parameters...') #le has parent w f = guitk.BCFrameCreate(w) #f has parent w and placed below le l = guitk.BCBoxLayoutCreate(f,guitk.constants.BCHorizontal) #l has parent f b1 = guitk.BCPushButtonCreate(l,"Open", '', None) #b1 has parent l b2 = guitk.BCPushButtonCreate(l,"Close", '', None) #b2 has parent l and will be placed next guitk.BCShow(w) 以上代碼的運作結果如下所示：
下面再展示一個簡單的BCLayout的代碼：
import ansa from ansa import guitk w = guitk.BCWindowCreate("BCWindow Example - by tuanzhang", guitk.constants.BCOnExitDestroy) horizontal = guitk.BCBoxLayoutCreate(w,guitk.constants.BCHorizontal) #horizontal layout is the 1st child guitk.BCLabelCreate(horizontal,"input:") #label belongs to horizontal guitk.BCLineEditCreate(horizontal,"Tuanzhang is a good man.") #lineEdit is horizontal's 2nd child grid = guitk.BCGridLayoutCreate(w) #grid layout is placed below horizontal for row in range(3): for col in range(3): pushbutton = guitk.BCPushButtonCreate(w, "pushButton",None) #Create button guitk.BCGridLayoutAddWidget(grid, pushbutton, row, col, guitk.constants.BCAlignAuto)# move the button to grid layout ok = guitk.BCPushButtonCreate(w,"OK",None)#'ok' button is BCWindow's 3rd child cancel = guitk.BCPushButtonCreate(w,"Cancle",None) #'cancel' button is BCWindow's 4th child guitk.BCShow(w) 以上代碼的運作結果如下所示：
BCGUI功能的建構方式即使是初學者也可以立即了解。有關所有BCGUI功能(原型，參數，操作等)的幫助，可以在腳本編輯器的幫助部分中找到。如下圖所示。
BCGUI函數的名稱由它所屬的類(例如BCLineEdit)加上對該類的對象執行的操作(例如SetText)組成。是以，函數名稱為BCLineEditSetText。如果函數不是以類名開頭的，則表示它是通用函數，适用于所有小部件和布局(而非項目)。例如，BCName函數傳回一個名稱，改名稱由BCSetName為小部件或布局設定。 從上面的示例不難看出規律，所有BCGUI函數均以BC開頭，而每個不同的單詞均以大寫字母開頭。 通常，每個函數的第一個參數是将要執行操作的小部件或布局，而在“ BC…Create”函數的情況下則是其父級。 本期内容完。 相關閱讀 《ANSA快速入門指南》中文幫助文檔淺析(上) 《ANSA快速入門指南》中文幫助文檔淺析(中) 《ANSA快速入門指南》中文幫助文檔淺析(下) 作者：團長 仿真專欄作者 聲明： 原創文章，首發仿真秀APP，部分圖檔源自網絡，如有不當請聯系我們，歡迎分享，禁止私自轉載，轉載請聯系我們。歡迎向我投稿，我們向你支付滿意稿酬和尊重署名權等。投稿請聯系我微信18610516616.
點選 檢視ANSA二次開發進階教程 喜歡 作者 ，請點贊和在看