《Matlab App Designer設(shè)計(jì)入門及實(shí)戰(zhàn)》課件 第5章 MATLAB App Designer設(shè)計(jì)基礎(chǔ)及常用組件

第5章MATLABAppDesigner設(shè)計(jì)基礎(chǔ)及常用組件本章要點(diǎn)MATLABAppDesigner設(shè)計(jì)工具是交互式開發(fā)環(huán)境，通過拖放可視化組件即可實(shí)現(xiàn)圖形用戶界面設(shè)計(jì)布局，還可以通過集成的編輯器快速為控件行為編程，整個(gè)設(shè)計(jì)過程分為兩大任務(wù)：圖形用戶界面可視化組件布局和組件行為編程。MATLAB圖形用戶界面由一系列的組件組成，包括常用組件、容器組件、圖窗工具組件和儀器組件等，本章主要介紹常用組件。用戶以某種方式選擇或激活組件，以最常用的激活方式鼠標(biāo)單擊為例，當(dāng)按下鼠標(biāo)按鈕，標(biāo)志著組件被選擇或其他動作。MATLAB通過設(shè)置這些組件的回調(diào)函數(shù)，實(shí)現(xiàn)交互組件的鼠標(biāo)或鍵盤事件與實(shí)現(xiàn)程序功能關(guān)聯(lián)起來，進(jìn)而完成特定交互式事件下的具體功能。本章要點(diǎn)：⑴MATLABAppDesigner設(shè)計(jì)基礎(chǔ)及設(shè)計(jì)步驟。⑵回調(diào)函數(shù)的概念及創(chuàng)建。⑶基礎(chǔ)設(shè)計(jì)工具。⑷常用組件。學(xué)習(xí)目標(biāo)：⑴了解MATLABAppDesigner的設(shè)計(jì)原則和步驟。⑵掌握回調(diào)函數(shù)的內(nèi)容及操作。⑶掌握基礎(chǔ)設(shè)計(jì)工具使用方法。⑷掌握常用組件的創(chuàng)建及其回調(diào)操作。5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.1界面介紹MATLABAppDesigner設(shè)計(jì)工具是原有GUIDE開發(fā)環(huán)境的替代工具。MATLABAppDesigner是一個(gè)功能豐富的開發(fā)環(huán)境，它提供設(shè)計(jì)視圖和代碼視圖、完整集成的MATLAB編輯器版本、一整套標(biāo)準(zhǔn)用戶界面組件，以及用于創(chuàng)建控制面板和人機(jī)交互界面的儀表、旋鈕、開關(guān)和指示燈。MATLABAppDesigner的打開方式有以下兩種。

（1）命令方式。

在命令行窗口輸入調(diào)用如下語句，即可打開設(shè)計(jì)環(huán)境。

appdesigner

（2）菜單方式。

打開MATLAB的主窗，選擇新建菜單項(xiàng)，選擇其中App命令，如圖5-1所示，即可打開設(shè)計(jì)環(huán)境。圖5-1通過主頁打開方式5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.1界面介紹或通過單擊MATLAB菜單欄的App菜單，選擇設(shè)計(jì)App來創(chuàng)建，如圖5-2所示。圖5-2通過菜單欄打開方式5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.1界面介紹圖5-3設(shè)計(jì)視圖下的設(shè)計(jì)環(huán)境

在App設(shè)計(jì)模板中選中一個(gè)模板，單擊“確定”按鈕，就會顯示App設(shè)計(jì)窗口，選擇不同的App設(shè)計(jì)模板，會出現(xiàn)不同的顯示效果。

其設(shè)計(jì)環(huán)境的【設(shè)計(jì)視圖】顯示，如圖5-3所示。分別由左側(cè)的【組件庫】、中部的【界面編輯區(qū)（畫布）】、右側(cè)【組件瀏覽器】組成。5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.1界面介紹圖5-4代碼視圖下的設(shè)計(jì)環(huán)境

選擇【代碼視圖】，則切換到代碼視圖模式，如圖5-4所示。分別由左側(cè)的【代碼瀏覽器】部分和【App的布局】部分、中部的【代碼編輯區(qū)】、右側(cè)的【組件瀏覽器】組成。5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.2設(shè)計(jì)步驟為了讓大家更好地掌握MATLABAppDesigner的設(shè)計(jì)原則，先帶領(lǐng)大家設(shè)計(jì)一個(gè)簡單的App界面。

【例

5-1】用戶輸入的矩形的寬和長，單擊按鈕得到矩形的面積。

首先，通過在【組件庫】選擇合適的組件，添加到中間的【界面編輯區(qū)】，共添加3個(gè)編輯字段（數(shù)字）和1個(gè)按鈕，如圖5-5所示。圖5-5計(jì)算矩形面積組件添加5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.2設(shè)計(jì)步驟

然后，通過在【界面編輯區(qū)】雙擊組件，修改組件的顯示名稱?；蛘咴凇窘M件瀏覽器】上部分選擇畫布中相應(yīng)的組件，在下方相應(yīng)顯示出不同組件的屬性表，通過修改相關(guān)屬性修改顯示名稱，即可得到如圖5-6所示的靜態(tài)界面。圖5-6計(jì)算矩形面積靜態(tài)界面5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.2設(shè)計(jì)步驟通過菜單欄【畫布】中的對齊、排列、間距的調(diào)整，使界面更加美觀，如圖5-7所示。圖5-7調(diào)整對齊、排列、間距的界面面5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.2設(shè)計(jì)步驟為了更好地在程序中調(diào)用不同的組件，可在【組件瀏覽器】上半部分的上下文菜單，右擊顯示組件重命名操作，如圖5-8所示。圖5-8組件重命名5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.2設(shè)計(jì)步驟

最后，在靜態(tài)界面的基礎(chǔ)上使其能夠?qū)崿F(xiàn)通過用戶輸入的矩形的寬和長，來計(jì)算矩形的面積的功能，即編寫界面實(shí)現(xiàn)動態(tài)功能的程序。

該界面的具體思路為：當(dāng)用戶輸入矩形長和寬后，點(diǎn)擊計(jì)算按鈕，即可在矩形面積位置顯示計(jì)算結(jié)果。那么，當(dāng)用戶點(diǎn)擊按鈕時(shí)，應(yīng)動態(tài)地實(shí)現(xiàn)提取上方兩個(gè)編輯框的數(shù)據(jù)相乘，并將相乘結(jié)果顯示在下方的編輯框內(nèi)。

所以在【組件瀏覽器】中找到【按鈕】組件，右擊選擇【回調(diào)】如圖5-9所示，再點(diǎn)擊【轉(zhuǎn)至jisuan_ButtonPushed回調(diào)】，設(shè)計(jì)環(huán)境自動跳轉(zhuǎn)到【代碼視圖】，且光標(biāo)自動定位于【按鈕】組件的回調(diào)函數(shù)位置（回調(diào)函數(shù)在下一小節(jié)詳細(xì)講解），如圖5-10所示。圖5-9添加回調(diào)圖5-10該界面的代碼視圖5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.2設(shè)計(jì)步驟按照設(shè)計(jì)思路在光標(biāo)定位處，輸入程序命令如下：k=app.kuan_EditField.Value;%調(diào)取kuan_EditField控件的Value，賦值給kc=app.chang_EditField.Value;%調(diào)取chang_EditField控件的Value，賦值給cm=k*c;app.mianji_EditField.Value=m;%將m的值賦值給mianji_EditField控件的Value屬性輸入界面如圖5-11所示。圖5-11程序編輯界面5.1MATLABAppDesigner界面及設(shè)計(jì)步驟5.1.2設(shè)計(jì)步驟

點(diǎn)擊上方菜單欄的【運(yùn)行】按鈕，實(shí)現(xiàn)如圖5-12所示界面，輸入數(shù)據(jù)，點(diǎn)擊計(jì)算按鈕后，即可實(shí)現(xiàn)計(jì)算矩形面積的功能，如圖5-13所示。圖5-12運(yùn)行界面

圖5-13界面功能展示綜上所述，界面制作包括界面設(shè)計(jì)和程序?qū)崿F(xiàn)，具體步驟為：⑴分析界面所要實(shí)現(xiàn)的主要功能，明晰設(shè)計(jì)任務(wù)。⑵構(gòu)思草圖，并換位到用戶角度審視草圖。⑶將構(gòu)思草圖，利用組件搭建靜態(tài)界面。⑷編寫界面實(shí)現(xiàn)動態(tài)功能的程序，對功能進(jìn)行仔細(xì)驗(yàn)證。5.2回調(diào)函數(shù)

回調(diào)函數(shù)是用戶與App中的UI組件交互時(shí)執(zhí)行的函數(shù)，每個(gè)回調(diào)函數(shù)都是一個(gè)子函數(shù)，每個(gè)圖形對象類型不同，回調(diào)函數(shù)也不同，大多數(shù)組件都至少包含一個(gè)回調(diào)，但是，某些組件（如標(biāo)簽和信號燈）沒有回調(diào)，因?yàn)檫@些組件僅用來顯示信息。查看某個(gè)組件支持的回調(diào)的列表，可通過單擊【組件瀏覽器】中的【回調(diào)】選項(xiàng)卡查看，如圖5-14所示。圖5-14回調(diào)列表5.2回調(diào)函數(shù)

創(chuàng)建UI組件的回調(diào)方法有很多，可根據(jù)不同的使用習(xí)慣實(shí)現(xiàn)。⑴右擊【界面編輯區(qū)】的組件，選擇【回調(diào)】，再選擇【添加xx回調(diào)】，參考上述例5-1方法。⑵在【組件瀏覽器】中選擇【回調(diào)】選項(xiàng)卡，將會顯示受支持的回調(diào)列表，通過單擊旁邊向下的三角形，可添加默認(rèn)名稱的回調(diào)，如圖5-15所示。如果已有現(xiàn)有回調(diào)，則下拉列表中會包含這些回調(diào)，如圖5-16所示。圖5-15默認(rèn)名稱添加回調(diào)

圖5-16現(xiàn)有回調(diào)5.2.1創(chuàng)建回調(diào)函數(shù)5.2回調(diào)函數(shù)在【代碼視圖】中，在【編輯器】選項(xiàng)卡中單擊【回調(diào)】圖表，彈出如圖5-17所示對話框圖5-17代碼視圖添加回調(diào)5.2.1創(chuàng)建回調(diào)函數(shù)

組件：選擇執(zhí)行回調(diào)的組件。

回調(diào)：用于指定回調(diào)屬性。回調(diào)屬性將回調(diào)函數(shù)映射到特定交互，某些組件具有多個(gè)可用的回調(diào)屬性，例如，滑塊具有兩個(gè)回調(diào)屬性，分別為ValueChangeFcn和ValueChangeingFcn兩個(gè)回調(diào)屬性。

名稱：為回調(diào)函數(shù)指定名稱，MATLABAppDesigner提供默認(rèn)名稱，也可更改名稱。5.2回調(diào)函數(shù)

搜索回調(diào)，可在【代碼瀏覽器】中的【回調(diào)】選項(xiàng)卡頂部的搜索欄搜索，可通過右擊選擇【轉(zhuǎn)至】，即可將光標(biāo)自動跳轉(zhuǎn)到可編輯的回調(diào)函數(shù)中，如圖5-18所示。

刪除回調(diào)，可在【代碼瀏覽器】中的【回調(diào)】選項(xiàng)卡下，選擇回調(diào)函數(shù)，右擊選擇【刪除】，即可刪除回調(diào)，如圖5-19所示。圖5-18搜索回調(diào)

圖5-19刪除回調(diào)5.2.2搜索回調(diào)和刪除回調(diào)

5.3基礎(chǔ)設(shè)計(jì)工具M(jìn)ATLABAppDesigner基礎(chǔ)設(shè)計(jì)工具包括：對齊工具、排列工具、間距工具、組件檢查器和組件瀏覽器等。5.3.1對齊、排列和間距工具

利用調(diào)整工具，如圖5-20所示，可以對MATLABAppDesigner對象設(shè)計(jì)區(qū)內(nèi)的多個(gè)對象的位置進(jìn)行調(diào)整，使界面更加美觀。調(diào)整工具包括：對齊工具、排列工具和間距工具。圖5-20對齊、排列和間距工具5.3基礎(chǔ)設(shè)計(jì)工具5.3.1對齊、排列和間距工具

對齊工具欄中，從左到右，從上到下，分別為左對齊、居中對齊、右對齊、頂端對齊、中間對齊和底端對齊。當(dāng)選中兩個(gè)或兩個(gè)以上組件時(shí)，可以使用該功能進(jìn)行位置調(diào)整。

排列工具欄中，從左到右分別為相同大小、組合和重新排序工具。當(dāng)選中兩個(gè)或兩個(gè)以上組件時(shí)，選擇相同大小工具中的寬度和高度、寬度或高度，如圖5-21所示，可將選中組件的相應(yīng)尺寸統(tǒng)一。選擇組合工具，可將多個(gè)組件組合，即可作為整體同時(shí)移動、刪除和復(fù)制操作。選中某個(gè)組件，選擇重新排序，可選擇置于頂層、上移一層、下移一層和置于底層選項(xiàng)，如圖5-22所示。圖5-21相同大小工具

圖5-22重新排序工具

間距工具欄中，當(dāng)選中兩個(gè)或兩個(gè)以上組件時(shí)，可實(shí)現(xiàn)水平或垂直方向的等間距調(diào)整。5.3基礎(chǔ)設(shè)計(jì)工具5.3.2組件檢查器

組件檢查器，可以用于查看、修改和設(shè)置每個(gè)組件的屬性值。當(dāng)選中某個(gè)組件時(shí)，左側(cè)會自動出現(xiàn)相應(yīng)的屬性列表，例如按鈕組件的屬性列表，將Text屬性值改為“開始”，如圖5-23所示。圖5-23按鈕屬性列表5.3基礎(chǔ)設(shè)計(jì)工具5.3.3組件瀏覽器

組件瀏覽器用于查看當(dāng)前設(shè)計(jì)階段的各個(gè)組件。例如，添加一個(gè)按鈕組件到界面編輯區(qū)，組件的名稱自動顯示在組件瀏覽器中，如圖5-24所示?？梢栽诮缑婢庉媴^(qū)或組件瀏覽器中選擇組件，系統(tǒng)將會自動在組件瀏覽器和界面編輯器中同時(shí)選中組件。

當(dāng)某些組件（例如滑塊組件）拖到界面編輯區(qū)時(shí)，系統(tǒng)會自動添加標(biāo)簽。如果組件具有標(biāo)簽，并且更改了標(biāo)簽文本（非數(shù)字的英文），則組件瀏覽器中組件的名稱也將與該文本匹配，如圖5-25所示，也可以通過右擊選中組件名稱，進(jìn)行重命名。圖5-24組件瀏覽器列表

圖5-25組件瀏覽器組件名稱

5.4常用組件MATLABAppDesigner共有常用組件21個(gè)，如表5-1所示為常用組件的名稱及功能。表5-1常用組件功能表名稱功能HTML將HTML、JavaScript或CSS嵌入MATLABAppDesigner下拉框也稱為下拉列表，定義一系列可供選擇的字符串切換按鈕組用于管理一組互斥的切換按鈕的容器列表框定義一系列可供選擇的字符串，用于顯示選項(xiàng)列表單選按鈕組用于管理一組互斥的單選按鈕的容器圖像用于顯示圖片的組件坐標(biāo)區(qū)用于顯示圖形和圖像復(fù)選框用于在兩種選項(xiàng)狀態(tài)之間切換微調(diào)器從一個(gè)有限集合中選擇數(shù)值按鈕執(zhí)行某種預(yù)定的功能或操作文本區(qū)域用于輸入多行文本的組件日期選擇器允許用戶從交互式日歷中選擇日期標(biāo)簽用于顯示靜態(tài)文本樹用于表示層次結(jié)構(gòu)中的項(xiàng)目列表樹（復(fù)選框）用于表示層次結(jié)構(gòu)中的復(fù)選框選項(xiàng)滑塊可滑動選擇指定范圍的數(shù)量值狀態(tài)按鈕指示一種二進(jìn)制開關(guān)狀態(tài)（開或關(guān)）編輯字段（數(shù)值）用于輸入數(shù)值的組件編輯字段（文本）用于輸入文本的組件表用于顯示數(shù)據(jù)的行和列超鏈接用于創(chuàng)建超鏈接的組件5.4常用組件

按鈕，又稱命令按鈕，主要用于響應(yīng)單擊事件的交互組件。按鈕是長方形組件，常常在組件本身標(biāo)有文本，單擊按鈕，執(zhí)行由回調(diào)字符串所定義的動作。

在默認(rèn)情況下，按鈕處于上凸的彈起狀態(tài)，當(dāng)單擊按鈕，按鈕處于下凹的狀態(tài)，當(dāng)用戶松開鼠標(biāo)后，按鈕恢復(fù)到上凸?fàn)顟B(tài)。5.4.1按鈕5.4常用組件5.4.1按鈕【例5-2】創(chuàng)建一個(gè)抽取隨機(jī)數(shù)界面。創(chuàng)建一個(gè)編輯字段（數(shù)值）和一個(gè)按鈕，按鈕文本標(biāo)簽設(shè)置為“抽取”，字體設(shè)置為14號黑體加粗，按鍵顏色為藍(lán)色，編輯字段標(biāo)簽為“隨機(jī)數(shù)”。單擊“抽取”按鈕，即在編輯字段中顯示1到10之間的任意一個(gè)數(shù)。

第一步：設(shè)置布局和屬性添加編輯字段（數(shù)值）和按鈕組件，其中，按鈕組件屬性表修改如圖5-26所示。靜態(tài)界面設(shè)計(jì)如圖5-27所示。

圖5-26界面設(shè)計(jì)

圖5-27按鈕屬性修改5.4常用組件5.4.1按鈕

第二步：添加回調(diào)

右擊按鈕組件，選擇【回調(diào)】，選擇【添加ButtonPushedFcn回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：R=randi(10);

%隨機(jī)抽取1到10的任意一個(gè)數(shù)，賦值給Rapp.EditField.Value=R;單擊【運(yùn)行】按鈕，運(yùn)行結(jié)果，如圖5-28所示。單擊【抽取】按鈕，執(zhí)行結(jié)果如圖5-29所示。

圖5-28運(yùn)行結(jié)果

圖5-29執(zhí)行結(jié)果

5.4常用組件5.4.1按鈕【例5-3】創(chuàng)建一個(gè)按鈕，單擊按鈕，彈出一個(gè)提示窗口。第一步：添加按鈕組件，放置于空白處。第二步：右擊按鈕組件，選擇【回調(diào)】，選擇【添加ButtonPushedFcn回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：msgbox('Welcome')運(yùn)行結(jié)果，如圖5-30所示。單擊【請單擊】按鈕，執(zhí)行結(jié)果如圖5-31所示。

圖5-30運(yùn)行結(jié)果

圖5-31執(zhí)行結(jié)果

5.4常用組件5.4.2標(biāo)簽

文本標(biāo)簽是顯示固定字符串的標(biāo)簽區(qū)域，也可作為其他組件提供功能解釋和使用說明，主要作用是提示功能。

【例5-4】創(chuàng)建登錄界面，共有2個(gè)界面。主界面：包含兩個(gè)按鈕，分別是登錄和關(guān)閉按鈕。當(dāng)單擊登錄按鈕時(shí)，關(guān)閉當(dāng)前界面，并打開歡迎界面；當(dāng)單擊關(guān)閉按鈕，關(guān)閉主界面。

第一步：設(shè)計(jì)主界面，添加登錄按鈕和關(guān)閉按鈕。設(shè)計(jì)歡迎界面，添加“您已進(jìn)入登錄界面”標(biāo)簽，并修改標(biāo)簽的字體、字號和顏色屬性，如圖5-32所示。

圖5-32添加標(biāo)簽組件

5.4常用組件5.4.2標(biāo)簽第二步：右擊【關(guān)閉】按鈕，選擇【回調(diào)】，選擇【添加ButtonPushedFcn回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：delete(app.UIFigure);右擊【登錄】按鈕，添加回調(diào)，輸入程序命令如下：delete(app.UIFigure);runwelcome.mlapp%打開welcom.mlapp界面運(yùn)行結(jié)果，如圖5-33所示。單擊【登錄】按鈕，執(zhí)行結(jié)果如圖5-34所示。

圖5-33運(yùn)行界面

圖5-34單擊登錄按鈕

5.4常用組件5.4.3坐標(biāo)區(qū)坐標(biāo)區(qū)組件是常用來顯示圖像或者圖形的坐標(biāo)軸，在MATLABAppDesigner中，可以設(shè)置一個(gè)或者多個(gè)坐標(biāo)區(qū)?！纠?-5】添加一個(gè)坐標(biāo)區(qū)和兩個(gè)按鈕。單擊繪圖按鈕，坐標(biāo)區(qū)繪制正弦函數(shù)圖形，單擊清空按鈕，清空坐標(biāo)軸圖形。第一步：添加1個(gè)坐標(biāo)區(qū)組件和2個(gè)按鈕組件。第二步：右擊【繪圖】按鈕，選擇【回調(diào)】，選擇【添加ButtonPushedFcn回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：

x=0:0.1:2*pi;y=sin(x);plot(app.UIAxes,x,y);xlabel(app.UIAxes,{'x'},'FontSize',9,'FontWeight','bold');ylabel(app.UIAxes,{'y=sinx'},'FontSize',9,'FontWeight','bold');title(app.UIAxes,{'正弦函數(shù)圖像'},'FontSize',14,'color','r','FontWeight','bold')5.4常用組件5.4.3坐標(biāo)區(qū)右擊【清空】按鈕，添加回調(diào)，輸入程序命令如下：

cla(app.UIAxes);reset(app.UIAxes);運(yùn)行結(jié)果界面，單擊【繪圖】按鈕，如圖5-35所示。單擊【清空】按鈕，執(zhí)行結(jié)果如圖5-36所示。

圖5-35單擊繪圖按鈕

圖5-36單擊清空按鈕5.4常用組件5.4.3坐標(biāo)區(qū)

坐標(biāo)區(qū)組件有兩個(gè)屬性可以確定是否響應(yīng)單擊，以及如何響應(yīng)單擊。⑴PickableParts：確定對象是否捕獲單擊；⑵HitTest：確定對象是否響應(yīng)單擊或?qū)⑵鋫鬟f給最近的父級。坐標(biāo)區(qū)組件組合使用PickableParts屬性和HitTest屬性可以實(shí)現(xiàn)以下幾種情況：⑴被單擊的對象捕獲單擊，并執(zhí)行按鈕按下回調(diào)或調(diào)用上下文菜單響應(yīng)；⑵被單擊的對象捕獲單擊，并將單擊傳遞給它的一個(gè)父級，該父級執(zhí)行按下按鈕回調(diào)或調(diào)用上下文菜單響應(yīng)；⑶被單擊的對象捕獲單擊，單擊可能由被單擊對象背后的對象捕獲。5.4常用組件5.4.3坐標(biāo)區(qū)【例5-6】創(chuàng)建一個(gè)坐標(biāo)區(qū)組件，繪制曲線。第一步：設(shè)置布局及屬性添加一個(gè)坐標(biāo)區(qū)組件，并將Title.String改為：\color[rgb]{0,0,1}y=2e^{-0.5x}sin(2{\pi}x)曲線、XLable.String改為：\color[rgb]{0,0,1}x、YLable.String改為：\color[rgb]{0,0,1}y，如圖5-37所示。PickableParts屬性設(shè)置為visible，HitTest屬性設(shè)置為on，如圖5-38所示。圖5-37設(shè)置布局及屬性

圖5-38PickableParts和HitTest屬性設(shè)置

5.4常用組件5.4.3坐標(biāo)區(qū)第二步：右擊坐標(biāo)區(qū)組件，選擇【回調(diào)】，選擇【添加qu_UIAxesButtonDown回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：x=0:pi/100:2*pi;y=2*exp(-0.5*x).*sin(2*pi*x);plot(app.qu_UIAxes,x,y)運(yùn)行結(jié)果界面，單擊坐標(biāo)區(qū)組件，執(zhí)行結(jié)果如圖5-39所示。圖5-39坐標(biāo)區(qū)組件運(yùn)行界面

5.4常用組件5.4.4編輯字段（數(shù)值、文本）

編輯字段分為數(shù)值編輯字段和文本編輯字段兩種，可供用戶動態(tài)地輸入數(shù)字或文本，其中，編輯字段（數(shù)值）只能輸入數(shù)字。

可編輯字段可供用戶輸入字符串，并在回調(diào)中獲取用戶所輸數(shù)據(jù)，或者用于顯示運(yùn)行結(jié)果?！纠?-7】根據(jù)用戶輸入的三角函數(shù)名稱、振幅、頻率和初相，繪制出對應(yīng)的三角函數(shù)曲線圖形。第一步：設(shè)置布局及屬性添加1個(gè)坐標(biāo)區(qū)、1個(gè)按鈕、3個(gè)編輯字段（數(shù)值）和1個(gè)編輯字段（文本）。其中，3個(gè)編輯字段（數(shù)值）用于用戶輸入振幅、頻率和初相，編輯字段（文本）用于用戶輸入三角函數(shù)名稱。界面布局如圖5-40所示。圖5-40界面布局

5.4常用組件5.4.4編輯字段（數(shù)值、文本）

分析：當(dāng)單擊【繪圖】按鈕，通過獲取用戶輸入的【三角函數(shù)名稱】確定一種運(yùn)算，并獲取用戶輸入的【振幅】、【頻率】和【相位】數(shù)據(jù)，將圖形繪制于坐標(biāo)區(qū)組件。

第二步：右擊【繪圖】按鈕，選擇【回調(diào)】，選擇【添加ButtonPushedFcn回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：

x=0:0.01:2*pi;san=app.san_EditField.Value;A=app.A_EditField.Value;W=app.W_EditField.Value;Q=app.Q_EditField.Value;switchapp.san_EditField.Value

case'sin'

y=A*sin(W*x+Q);

plot(app.UIAxes,x,y);

title(app.UIAxes,{'正弦函數(shù)圖像'});

case'cos'

y=A*cos(W*x+Q);

plot(app.UIAxes,x,y);

title(app.UIAxes,{'余弦函數(shù)圖像'});

case'tan'

y=A*tan(W*x+Q);

plot(app.UIAxes,x,y);

title(app.UIAxes,{'正切函數(shù)圖像'});

otherwise

msgbox('請正確輸入三角函數(shù)名稱')end5.4常用組件5.4.4編輯字段（數(shù)值、文本）

運(yùn)行并在編輯字段組件輸入相應(yīng)內(nèi)容，單擊【繪圖】按鈕，如圖5-41所示。圖5-41執(zhí)行結(jié)果界面

5.4常用組件5.4.4編輯字段（數(shù)值、文本）

當(dāng)用戶在編輯字段（數(shù)值）組件輸入非數(shù)值，提示“值必須為數(shù)值”，如圖5-42所示。當(dāng)用戶輸入三角函數(shù)名稱錯誤，彈出提示對話框，如圖5-43所示。圖5-42編輯字段（數(shù)值）

圖5-43提示對話框

編輯字段（數(shù)值、文本）也可用于顯示運(yùn)行結(jié)果，顯示數(shù)據(jù)或文本。5.4常用組件5.4.4編輯字段（數(shù)值、文本）

【例5-8】設(shè)計(jì)一個(gè)簡易BMI計(jì)算。獲取用戶身高和體重，計(jì)算BMI值，并根據(jù)中國標(biāo)準(zhǔn)顯示胖瘦程度。

第一步：設(shè)置布局及屬性

添加3個(gè)編輯字段（數(shù)值）、1個(gè)編輯字段（文本）、1個(gè)按鈕和1個(gè)標(biāo)簽，如圖5-44所示。圖5-44BMI界面設(shè)計(jì)

5.4常用組件5.4.4編輯字段（數(shù)值、文本）第二步：獲取用戶輸入的身高和體重信息，計(jì)算BMI數(shù)值，并通過BMI數(shù)值范圍確定肥胖程度。右擊【計(jì)算】按鈕，選擇【回調(diào)】，選擇【添加ButtonPushedFcn回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：

h=app.height_EditField.Value;w=app.weight_EditField.Value;app.BMI_EditField.Value=w/(h*h);ifapp.BMI_EditField.Value<=18.5

app.EditField.Value='偏瘦'elseif(18.5<app.BMI_EditField.Value)&&(app.BMI_EditField.Value<=23.9)

app.EditField.Value='正常'elseif(23.9<app.BMI_EditField.Value)&&(app.BMI_EditField.Value<=27.9)

app.EditField.Value='偏胖'elseif(27.9<app.BMI_EditField.Value)&&(app.BMI_EditField.Value<=40)

app.EditField.Value='肥胖'else

app.EditField.Value='極重度肥胖'end5.4常用組件5.4.4編輯字段（數(shù)值、文本）運(yùn)行并輸入身高體重?cái)?shù)值，單擊【計(jì)算】按鈕，運(yùn)行結(jié)果如圖5-45所示。圖5-45BMI計(jì)算結(jié)果

5.4常用組件5.4.5單選按鈕組

單選按鈕組是用于管理一組互斥的單選按鈕的容器，可通過屬性控制單選按鈕組組件的外觀和行為。

舊版本的MATLAB中，按鈕組是GUI對象的容器，當(dāng)按鈕組的對象為單選按鈕或切換按鈕對象時(shí)，會對子對象本身也定義了Callback函數(shù)。新版本的MATLAB中，按鈕組進(jìn)行了優(yōu)化，單獨(dú)設(shè)置了單選按鈕組和切換按鈕組組件，并且其管理的單選按鈕和切換按鈕對象不能再創(chuàng)建Callback回調(diào)函數(shù)

5.4常用組件5.4.5單選按鈕組

【例5-9】單選按鈕實(shí)例。要求將用戶按鈕組所選擇的內(nèi)容，顯示到編輯字段組件。第一步：設(shè)置布局及屬性添加1個(gè)編輯字段（數(shù)值）和1個(gè)單選按鈕組，并在單選按鈕組中添加到5個(gè)選項(xiàng)。第二步：右擊單選按鈕組組件，選擇【回調(diào)】，選擇【轉(zhuǎn)至ButtonGroupSelectionChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：

selectedButton=app.ButtonGroup.SelectedObject;switchselectedButton.Text

case'20'

app.EditField.Value='20';

case'30'

app.EditField.Value='30';

case'40'

app.EditField.Value='40';

case'50'

app.EditField.Value='50';

case'其他'

app.EditField.Value='其他';end5.4常用組件5.4.5單選按鈕組運(yùn)行并選擇“50”選項(xiàng)，運(yùn)行結(jié)果如圖5-46所示。圖5-46按鈕選項(xiàng)組組件運(yùn)行界面5.4常用組件5.4.5單選按鈕組【例5-10】用單選按鈕組實(shí)現(xiàn)二進(jìn)制與十進(jìn)制數(shù)之間的轉(zhuǎn)換。第一步：設(shè)置布局及屬性添加2個(gè)編輯字段（數(shù)值）和1個(gè)單選按鈕組，在單選按鈕組中可選擇二進(jìn)制轉(zhuǎn)十進(jìn)制或十進(jìn)制轉(zhuǎn)二進(jìn)制。第二步：右擊單選按鈕組組件，選擇【回調(diào)】，選擇【轉(zhuǎn)至ButtonGroupSelectionChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：selectedButton=app.ButtonGroup.SelectedObject;str=app.yuan_EditField.Value;switchselectedButton.Text

case'二進(jìn)制轉(zhuǎn)十進(jìn)制'

app.jieguo_EditField.Value=bin2dec(num2str(str));

case'十進(jìn)制轉(zhuǎn)二進(jìn)制'

app.jieguo_EditField.Value=str2double(dec2bin(str,24));end5.4常用組件5.4.5單選按鈕組運(yùn)行輸入數(shù)據(jù)并選擇“二進(jìn)制轉(zhuǎn)十進(jìn)制”選項(xiàng)，運(yùn)行結(jié)果如圖5-47所示。輸入數(shù)據(jù)并選擇“十進(jìn)制轉(zhuǎn)二進(jìn)制”選項(xiàng)，運(yùn)行結(jié)果如圖5-48所示。圖5-47二進(jìn)制轉(zhuǎn)十進(jìn)制

圖5-48十進(jìn)制轉(zhuǎn)二進(jìn)制

5.4常用組件5.4.5單選按鈕組【例5-11】用單選按鈕組實(shí)現(xiàn)對坐標(biāo)區(qū)內(nèi)曲線的顏色進(jìn)行選擇。第一步：設(shè)置布局及屬性添加1個(gè)坐標(biāo)區(qū)和1個(gè)單選按鈕組，在單選按鈕組中設(shè)置黃色、紅色和藍(lán)色選項(xiàng)。第二步：右擊單選按鈕組組件，選擇【回調(diào)】，選擇【轉(zhuǎn)至ButtonGroupSelectionChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：selectedButton=app.ButtonGroup.SelectedObject;x=0:0.1:2*pi;y=sin(x);hp=plot(app.UIAxes,x,y,'LineWidth',2);switchselectedButton.Textcase'黃色'set(hp,'color','y');case'紅色'set(hp,'color','r');case'藍(lán)色'set(hp,'color','b');end5.4常用組件5.4.5單選按鈕組運(yùn)行后選擇“紅色”單選按鈕，運(yùn)行結(jié)果如圖5-49所示。圖5-49線形選擇界面5.4常用組件5.4.6切換按鈕組

切換按鈕組與單選按鈕組相似，是用于管理一組互斥的切換按鈕的容器，可通過屬性控制單選按鈕組組件的外觀和行為。

【例5-12】添加切換按鈕組，實(shí)現(xiàn)當(dāng)用戶點(diǎn)擊切換按鈕時(shí)，切換按鈕組的標(biāo)題也相應(yīng)發(fā)生改變。

第一步：設(shè)置布局及屬性。添加1個(gè)切換按鈕組，按鈕名稱為1、2和3。界面布局如圖5-50(a)所示。

第二步：右擊切換按鈕組組件，選擇【回調(diào)】，選擇【轉(zhuǎn)至ButtonGroupSelectionChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：selectedButton=app.ButtonGroup.SelectedObject;switchselectedButton.Textcase'1'

app.ButtonGroup.Title="您選擇的數(shù)字是："+selectedButton.Textcase'2'app.ButtonGroup.Title="您選擇的數(shù)字是："+selectedButton.Textcase'3'app.ButtonGroup.Title="您選擇的數(shù)字是："+selectedButton.Textend5.4常用組件5.4.6切換按鈕組運(yùn)行后分別單擊“1”切換按鈕和“3”切換按鈕，運(yùn)行結(jié)果如圖5-50(b)和5-50(c)所示。

(a)界面布局

(b)選擇數(shù)字1(c)選擇數(shù)字3

圖5-50例5-12運(yùn)行結(jié)果5.4常用組件5.4.6切換按鈕組【例5-13】實(shí)現(xiàn)通過單選按鈕組和切換按鈕組組件。切換坐標(biāo)區(qū)曲線的顏色、線型和圖形類型的界面。第一步：設(shè)置布局及屬性。添加2個(gè)切換按鈕組，實(shí)現(xiàn)顏色和線型的切換；添加1個(gè)單選按鈕組，實(shí)現(xiàn)不同函數(shù)的切換；添加1個(gè)按鈕實(shí)現(xiàn)繪圖操作。界面布局如圖5-51所示。第二步：右擊【繪圖】按鈕組件，選擇【回調(diào)】，選擇【添加ButtonPushedFcn回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：selectedButton1=app.ButtonGroup.SelectedObject;selectedButton2=app.ButtonGroup_2.SelectedObject;selectedButton3=app.ButtonGroup_3.SelectedObject;switchselectedButton1.Text%第一個(gè)切換按鈕組，選擇顏色case'藍(lán)色'co='b';case'綠色'co='g';case'紅色'co='r';endswitchselectedButton2.Text%第一個(gè)切換按鈕組，選擇線型case'粗'wi=3;case'中等'wi=2;case'細(xì)'wi=1;endswitchselectedButton3.Text%單選按鈕組，選擇函數(shù)類型case'正弦'x=0:0.1:2*pi;y=sin(x);plot(app.UIAxes,x,y,'color',co,'LineWidth',wi);case'余弦'x=0:0.1:2*pi;y=cos(x);plot(app.UIAxes,x,y,'color',co,'LineWidth',wi);case'正切'x=0:0.1:2*pi;y=tan(x);plot(app.UIAxes,x,y,'color',co,'LineWidth',wi);end5.4常用組件5.4.6切換按鈕組運(yùn)行后分別選擇顏色、線型和函數(shù)類型后，單擊【繪圖】按鈕，運(yùn)行結(jié)果如圖5-52所示。

圖5-51界面布局圖

圖5-52運(yùn)行結(jié)果5.4常用組件5.4.7下拉框【例5-14】通過下拉框選擇不同菜品，并顯示相應(yīng)菜品簡介。第一步：設(shè)置布局及屬性。添加1個(gè)下拉框，1個(gè)標(biāo)簽。第二步：右擊下拉框組件，選擇【回調(diào)】，選擇【添加DropDownValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：value=app.DropDown.Value;switchvaluecase'糖醋里脊'app.Label_2.Text={'配料：里脊肉，食用油，雞蛋，香蔥，生姜，面粉，淀粉。''口感：甜酸可口，外焦里嫩，口齒留香，回味無窮。'};case'麻婆豆腐'app.Label_2.Text={'配料：豆腐、肉末、辣椒、花椒、豆豉、豆瓣醬、花椒粉、鹽''口感：麻、辣、鮮、香、燙、嫩、酥'};case'油燜大蝦'app.Label_2.Text={'鮮大蝦、料酒，荊沙辣醬，白糖，花椒油，青蒜段，姜絲''口感：麻辣爽口、口味鮮香'};end5.4常用組件5.4.6切換按鈕組運(yùn)行后分別選擇“糖醋里脊”和“油燜大蝦”，運(yùn)行結(jié)果如圖5-53所示。

圖5-53下拉框案例5.4常用組件5.4.7下拉框【例5-15】下拉框選擇圓形、矩形或三角形，用戶通過彈出對話框輸入?yún)?shù)，計(jì)算出相應(yīng)圖形的面積。第一步：設(shè)置布局及屬性。添加1個(gè)下拉框。界面布局如圖5-54所示。圖5-54界面布局

第二步：右擊下拉框組件，選擇【回調(diào)】，選擇【添加DropDownValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：5.4常用組件5.4.7下拉框value=app.DropDown.Value;switchvaluecase'圓形'r=inputdlg('請輸入半徑(cm)：','圓形面積');s1=num2str(str2double(r)*str2double(r)*3.14);msgbox(strcat('計(jì)算的面積為：',s1),'計(jì)算結(jié)果');case'矩形'a=inputdlg('請輸入矩形長(cm)：','矩形面積');b=inputdlg('請輸入矩形寬(cm)：','矩形面積');s2=num2str(str2double(a)*str2double(b));msgbox(strcat('計(jì)算的面積為：',s2),'計(jì)算結(jié)果');case'三角形'd=inputdlg('請輸入三角形的底邊(cm)：','三角形面積');h=inputdlg('請輸入三角形的高(cm)：','三角形面積');s3=num2str((str2double(d)*str2double(h))*0.5);msgbox(strcat('計(jì)算的面積為：',s3),'計(jì)算結(jié)果');end5.4常用組件5.4.7下拉框

運(yùn)行后以選擇“矩形”為例，彈出如圖5-55(a)對話框，輸入矩形的長，單擊確定按鈕，繼續(xù)彈出如圖5-55(b)所示對話框，輸入矩形的寬，單擊確定，最后，彈出結(jié)果對話框，如圖5-55(c)所示。(a)矩形的長

(b)矩形的寬

(c)矩形的面積

圖5-55計(jì)算面積運(yùn)行界面5.4常用組件5.4.8列表框

【例5-16】在坐標(biāo)區(qū)繪制正弦曲線，并利用單選按鈕組選擇線型，列表框選擇坐標(biāo)區(qū)線寬和圖形顏色。第一步：設(shè)置布局及屬性。添加1個(gè)坐標(biāo)區(qū)，1個(gè)單選按鈕組，2個(gè)列表框。第二步：右擊單選按鈕組件，選擇【回調(diào)】，選擇【轉(zhuǎn)至ButtonGroupSelectionChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：selectedButton=app.ButtonGroup.SelectedObject;switchselectedButton.Text

case'實(shí)線'

app.UIAxes.GridLineStyle='-';

case'虛線'

app.UIAxes.GridLineStyle=':';

end5.4常用組件5.4.8列表框

右擊第一個(gè)列表框組件，選擇【回調(diào)】，選擇【轉(zhuǎn)至ListBoxValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：value=app.ListBox.Value;x=0:0.1:4*pi;y=sin(x);switchvaluecase'黃色'plot(app.UIAxes,x,y,'color','y','LineWidth',2);case'紅色'plot(app.UIAxes,x,y,'color','r','LineWidth',2);case'綠色'plot(app.UIAxes,x,y,'color','g','LineWidth',2);case'藍(lán)色'plot(app.UIAxes,x,y,'color','b','LineWidth',2);end5.4常用組件5.4.8列表框右擊第二個(gè)列表框組件，選擇【回調(diào)】，選擇【轉(zhuǎn)至ListBox_2ValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：value=app.ListBox_2.Value;switchvaluecase'寬'app.UIAxes.LineWidth=2;case'中等'app.UIAxes.LineWidth=1;case'窄'app.UIAxes.LineWidth=0.5;end5.4常用組件5.4.8列表框運(yùn)行后分別對網(wǎng)格線型、坐標(biāo)區(qū)線寬和圖形顏色進(jìn)行調(diào)整，運(yùn)行結(jié)果如圖5-56所示。圖5-56列表框案例5.4常用組件5.4.8列表框【例5-17】將指定路徑文件夾下的所有.jpg格式圖片導(dǎo)入到列表框，并將選中的圖片顯示出來。第一步：設(shè)置布局及屬性。添加1個(gè)坐標(biāo)區(qū)，1個(gè)列表框，1個(gè)按鈕。界面布局如圖5-57所示。第二步：右擊【獲取圖像】按鈕組件，選擇【回調(diào)】，選擇【添加ButtonPushedFcn回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：globalFilePathFilePath=uigetdir('*.*','請選擇文件夾');jpg_list=dir(strcat(FilePath,'\*.jpg'));jpg_num=length(jpg_list);ifjpg_num>0forj=1:jpg_nums=jpg_list(j).name;app.ListBox.Items=[app.ListBox.Items,num2str(s)];%列表框動態(tài)賦值endend5.4常用組件5.4.8列表框右擊列表框組件，選擇【回調(diào)】，選擇【轉(zhuǎn)至ListBoxValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：value=app.ListBox.Value;globalFilePathimage=[FilePath,'\',value];I=imread(image);

%讀取圖片imshow(I,'parent',app.UIAxes);%顯示圖片到坐標(biāo)軸

運(yùn)行界面，單擊【獲取圖像】按鈕，彈出對話框查找如圖5-58所示文件夾，單擊該文件夾，列表框內(nèi)即可顯示文件夾內(nèi)全部的.jpg格式圖片名稱，如圖5-59所示。選擇其中一個(gè)選項(xiàng)，即可將相應(yīng)圖片顯示在坐標(biāo)區(qū)內(nèi)，如圖5-60所示。5.4常用組件5.4.8列表框圖5-57界面布局

圖5-58文件夾內(nèi)圖片圖5-59列表框獲取圖片信息

圖5-60顯示圖像5.4常用組件5.4.9復(fù)選框【例5-18】通過復(fù)選框控制坐標(biāo)區(qū)的X軸和Y軸網(wǎng)格線是否顯示。第一步：設(shè)置布局及屬性。添加1個(gè)坐標(biāo)區(qū)，2個(gè)復(fù)選框。第二步：右擊第一個(gè)復(fù)選框組件，選擇【回調(diào)】，選擇【添加XCheckBoxValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：value=app.XCheckBox.Value;ifvalueapp.UIAxes.XGrid='on';elseapp.UIAxes.XGrid='off';end

右擊第二個(gè)復(fù)選框組件，選擇【回調(diào)】，選擇【添加XCheckBoxValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：5.4常用組件5.4.9復(fù)選框value=app.YCheckBox.Value;ifvalueapp.UIAxes.YGrid='on';elseapp.UIAxes.YGrid='off';end運(yùn)行界面，選擇復(fù)選框選項(xiàng)，坐標(biāo)區(qū)網(wǎng)格發(fā)生相應(yīng)變化，如圖5-61所示。圖5-61復(fù)選框調(diào)整網(wǎng)格線5.4常用組件5.4.9復(fù)選框【例5-19】通過下拉框選擇是否通過英語等級考試，若未通過，則復(fù)選框被禁用，若通過，則從復(fù)選框內(nèi)選擇相應(yīng)英語等級考試。第一步：設(shè)置布局及屬性。添加1個(gè)下拉框，1個(gè)復(fù)選框。第二步：右擊下拉框組件，選擇【回調(diào)】，選擇【添加DropDownValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：value=app.DropDown.Value;switchvaluecase'是'app.CheckBox.Enable='on';app.CheckBox_2.Enable='on';case'否'app.CheckBox.Enable='off';app.CheckBox_2.Enable='off';end5.4常用組件5.4.9復(fù)選框

運(yùn)行界面，下拉框選擇“否”，復(fù)選框禁用，如圖5-62所示。下拉框選擇“是”，并選擇“四級”復(fù)選框，如圖5-63所示。

圖5-62選擇“是”結(jié)果

圖5-63選擇“否”界面5.4常用組件5.4.10樹及樹（復(fù)選框）【例5-20】利用樹組件實(shí)現(xiàn)菜單及旅游景點(diǎn)列表，當(dāng)點(diǎn)擊列表中某個(gè)選項(xiàng)，在文本區(qū)域組件顯示相應(yīng)的內(nèi)容。第一步：設(shè)置布局及屬性。添加1個(gè)樹組件，1個(gè)文本區(qū)域。界面布局如圖5-64所示。第二步：右擊樹組件，選擇【回調(diào)】，選擇【添加TreeSelectioneChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：圖5-64界面布局設(shè)計(jì)5.4常用組件5.4.10樹及樹（復(fù)選框）selectedNodes=app.Tree.SelectedNodes;switchselectedNodes.Textcase'糖醋里脊'app.TextArea.Value={'配料：里脊肉，食用油，雞蛋，香蔥，生姜，面粉，淀粉。''口感：甜酸可口，外焦里嫩，口齒留香，回味無窮。'};case'麻婆豆腐'app.TextArea.Value={'配料：豆腐、肉末、辣椒、花椒、豆豉、豆瓣醬、花椒粉、鹽''口感：麻、辣、鮮、香、燙、嫩、酥'};case'油燜大蝦'app.TextArea.Value={'鮮大蝦、料酒，荊沙辣醬，白糖，花椒油，青蒜段，姜絲''口感：麻辣爽口、口味鮮香'};case'長城'app.TextArea.Value={'長城'};case'兵馬俑'app.TextArea.Value={'兵馬俑'};case'故宮'app.TextArea.Value={'故宮'};end5.4常用組件5.4.10樹及樹（復(fù)選框）運(yùn)行界面，選擇“麻婆豆腐”，運(yùn)行結(jié)果如圖5-65所示。圖5-65運(yùn)行界面結(jié)果5.4常用組件5.4.10樹及樹（復(fù)選框）selectedNodes=app.Tree.SelectedNodes;switchselectedNodes.Textcase'魯菜'app.TextArea.Value=['魯菜，鮮香脆嫩、突出原味、'...'咸鮮為主'];case'川菜'app.TextArea.Value=['川菜，取材廣泛，調(diào)味多變，'...'菜式多樣，口味清鮮，醇濃并重'];case'粵菜'app.TextArea.Value=['粵菜，注重質(zhì)和味，口味比較'...'清淡，力求清中鮮、淡中求美'];case'湘菜'app.TextArea.Value=['湘菜，制作精細(xì)，用料上比較'...'廣泛，口味多變，品種繁多'];end【例5-21】通過樹（復(fù)選框）選擇不同菜系，并在文本區(qū)域組件顯示菜系簡介。第一步：設(shè)置布局及屬性。添加1個(gè)樹（復(fù)選框），1個(gè)文本區(qū)域。第二步：右擊樹（復(fù)選框）組件，選擇【回調(diào)】，選擇【添加TreeSelectioneChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：5.4常用組件5.4.10樹及樹（復(fù)選框）運(yùn)行界面，先選擇“魯菜”，再選擇“川菜”，運(yùn)行結(jié)果如圖5-66所示。圖5-66樹（復(fù)選框）案例5.4常用組件5.4.11表data=readtable("C:\Users\lxy\Desktop\Data.xlsx");app.UITable.Data=data;VariableDescriptions=data.Properties.VariableDescriptions;app.UITable.ColumnName=data.Properties.VariableNames%給ColumnName復(fù)制【例5-22】通過按鈕獲取Excel表格的內(nèi)容，并顯示在表組件。第一步：設(shè)置布局及屬性。添加1個(gè)表，1個(gè)按鈕。界面布局如圖5-67所示。第二步：右擊按鈕組件，選擇【回調(diào)】，選擇【添加ButtonPushedFcn回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：5.4常用組件5.4.11表運(yùn)行界面，單擊【讀取表格內(nèi)容】按鈕，如圖5-68所示。

圖5-67表案例頁面布局

圖5-68表組件運(yùn)行結(jié)果5.4常用組件5.4.11表properties(Access=private)troperty%Descriptionmoused_ind;moused_ind2;NewData;end【例5-23】通過按鈕對表組件的內(nèi)容進(jìn)行增加和刪除。第一步：設(shè)置布局及屬性。添加1個(gè)表，2個(gè)按鈕，表組件的ColumnEditable屬性設(shè)置為“true”。第二步：點(diǎn)擊【屬性】，選擇【私有屬性】，如圖5-69所示。界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：5.4常用組件5.4.11表app.t=app.UITable.Data;nr={[],[],[]};%1行3列的空白數(shù)據(jù)app.UITable.Data=[app.t;nr];%將空白數(shù)據(jù)添加到表中app.t=app.UITable.Data;newData1=app.t;set(app.UITable,'Data',newData1);右擊【增加】按鈕組件，選擇【回調(diào)】，選擇【添加ButtonPushed回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：此時(shí)，運(yùn)行界面，單擊【增加】按鈕即可增加一行空白數(shù)據(jù)，并且是可編輯狀態(tài)。若想實(shí)現(xiàn)刪除功能，前提是能夠獲取鼠標(biāo)在表組件中的位置。即右擊表組件，選擇【回調(diào)】，選擇【添加UITableCellSelection回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：indices=event.Indices;indices=event.Indices;app.moused_ind=indices(1);app.moused_ind2=indices(2);5.4常用組件5.4.11表app.UITable.Data(app.moused_ind,:)=[];app.t=app.UITable.Data;右擊【刪除】按鈕組件，選擇【回調(diào)】，選擇【添加Button_2Pushed回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：運(yùn)行界面，單擊【增加】按鈕并編輯內(nèi)容，如圖5-70所示。鼠標(biāo)選擇某一行數(shù)據(jù)并單擊【刪除】按鈕，即可刪除該行數(shù)據(jù)。

圖5-69添加私有屬性

圖5-70增加并編輯數(shù)據(jù)界面5.4常用組件5.4.12滑塊value=app.EditField.Value;app.Slider.Value=app.EditField.Value;【例5-24】實(shí)現(xiàn)滑塊與編輯字段（數(shù)值）之間的數(shù)據(jù)傳遞，即移動滑塊，相應(yīng)數(shù)值即可顯示在編輯字段（數(shù)值）上，在編輯字段（數(shù)值）上輸入滑塊范圍內(nèi)的數(shù)值，滑塊指針自動移動。第一步：設(shè)置布局及屬性。添加1個(gè)編輯字段（數(shù)值），1個(gè)滑塊。第二步：右擊編輯字段（數(shù)值）組件，選擇【回調(diào)】，選擇【添加EditFieldValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：右擊滑塊組件，選擇【回調(diào)】，選擇【添加SliderValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：value=app.Slider.Value;app.EditField.Value=app.Slider.Value;5.4常用組件5.4.12滑塊運(yùn)行界面，在編輯字段（數(shù)值）輸入200，滑動條自動調(diào)整到相應(yīng)位置，如圖5-71所示。當(dāng)移動滑動條位置，編輯字段（數(shù)值）自動顯示相應(yīng)數(shù)值，如圖5-72所示。圖5-71編輯字段（數(shù)值）輸入數(shù)據(jù)

圖5-72調(diào)整滑動條數(shù)值5.4常用組件5.4.12滑塊value=app.EditField.Value;app.Slider.Value=app.EditField.Value;【例5-25】通過滑塊選擇振幅、角頻率和初相位的數(shù)值，點(diǎn)擊繪圖按鈕，在坐標(biāo)區(qū)繪制相應(yīng)參數(shù)的正弦函數(shù)曲線圖像。第一步：設(shè)置布局及屬性。添加3個(gè)滑塊、3個(gè)編輯字段（數(shù)值）、1個(gè)按鈕和1個(gè)坐標(biāo)區(qū)。第二步：分別右擊3個(gè)編輯字段（數(shù)值）組件，分別選擇【回調(diào)】，選擇【添加EditFieldValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，分別輸入程序命令如下：第一條程序命令：第二條程序命令：value=app.EditField_2.Value;app.Slider_2.Value=app.EditField_2.Value;第三條程序命令：value=app.EditField_3.Value;app.EditField_3.Value=app.Slider_3.Value;5.4常用組件5.4.12滑塊value=app.Slider.Value;app.EditField.Value=app.Slider.Value;分別右擊滑塊組件，分別選擇【回調(diào)】，選擇【添加SliderValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：第一條程序命令：第二條程序命令：value=app.Slider_2.Value;app.EditField_2.Value=app.Slider_2.Value;第三條程序命令：value=app.Slider_3.Value;app.EditField_3.Value=app.Slider_3.Value;5.4常用組件5.4.12滑塊x=0:0.1:5*pi;a=app.Slider.Value;w=app.Slider_2.Value;q=app.Slider_3.Value;y=a*sin(w*x+q);plot(app.UIAxes,x,y);右擊【繪圖】按鈕組件，選擇【回調(diào)】，選擇【添加ButtonPushed回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：

運(yùn)行界面，滑動滑塊選擇振幅、角頻率和初相位的數(shù)值，單擊【繪圖】按鈕，即可在坐標(biāo)區(qū)繪制相應(yīng)參數(shù)的正弦函數(shù)曲線，如圖5-73所示。：圖5-73運(yùn)行結(jié)果界面

注意：右擊滑塊，選擇【回調(diào)】，當(dāng)選擇【添加SliderValueChanging回調(diào)】時(shí)，詳見例6-4。5.4常用組件5.4.13微調(diào)器app.Slider.Value=app.Spinner.Value;%控制滑塊顯示數(shù)值app.Gauge.Value=app.Spinner.Value;%控制儀表顯示數(shù)值【例5-26】通過微調(diào)器控制滑塊和儀表組件的顯示數(shù)值。第一步：設(shè)置布局及屬性。添加1個(gè)微調(diào)器、1個(gè)滑塊、1個(gè)儀表。第二步：右擊微調(diào)器組件，選擇【回調(diào)】，選擇【添加SpinnerValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：運(yùn)行界面，調(diào)整微調(diào)器數(shù)值，觀察到滑塊和儀表也發(fā)生相應(yīng)變化，如圖5-74所示。：圖5-74微調(diào)器運(yùn)行界面5.4常用組件5.4.13微調(diào)器a=app.Spinner.Value;selectedButton=app.ButtonGroup.SelectedObject;switchselectedButton.Textcase'紅色'app.Lamp.Color=[a,0,0];case'綠色'app.Lamp.Color=[0,a,0];end【例5-27】實(shí)現(xiàn)通過單選按鈕組選擇燈的顏色，進(jìn)而通過微調(diào)器調(diào)整燈的亮度。第一步：設(shè)置布局及屬性。添加1個(gè)微調(diào)器、1個(gè)信號燈、1個(gè)單選按鈕組。微調(diào)器的Limits屬性調(diào)整為[0,1]，step屬性調(diào)整為0.1。第二步：右擊微調(diào)器組件，選擇【回調(diào)】，選擇【添加SpinnerValueChanged回調(diào)】，界面自動跳轉(zhuǎn)到代碼視圖，在光標(biāo)定位處，輸入程序命令如下：5.4常用組件5.4.13微調(diào)器運(yùn)行界面，在單選按鈕組選擇綠色，調(diào)整微調(diào)器數(shù)值，觀察到信號燈組件顏色隨著微調(diào)器數(shù)值的調(diào)整，亮度發(fā)生變化。當(dāng)亮度值為0.4時(shí)，如圖5-75所示。當(dāng)亮度值為0.8時(shí)，如圖5-76所示。

圖5-75微調(diào)器調(diào)整信息燈亮度

圖5-76微調(diào)器調(diào)整信息燈亮度5.4常用組件5.4.14狀態(tài)按鈕value=app.ONOFFButton.Value;ifvalueapp.Lamp.Color=[0,1,0];elseapp.Lamp.Color=[0,0,0]