AWTK是基于C語言開發(fā)的跨平臺GUI框架。本系列文章介紹如何從0開始創(chuàng)建AWTK應(yīng)用程序，包括搭建開發(fā)調(diào)試環(huán)境、使用AWTK創(chuàng)建Hello工程并在模擬器上運(yùn)行、將AWTK應(yīng)用程序移植到其它平臺。

創(chuàng)建工程

本篇文章我們來創(chuàng)建第一個AWTK程序，也就是HelloWorld程序，它總共包含兩個頁面，先來看下最終效果圖：圖1 Hello工程兩個頁面的效果預(yù)覽首頁包含兩個控件，一個是顯示“Hello World”的label控件，另一個是顯示“跳轉(zhuǎn)頁面”文本的button控件，點(diǎn)擊按鈕時會跳轉(zhuǎn)到第二個頁面。第二個頁面包含顯示圖片的image控件、edit控件、進(jìn)度條progress_bar控件、label控件以及按鈕button控件。其中image控件具有位移動畫，會循環(huán)地左右移動。edit控件在修改值時會同步地改變進(jìn)度條的值和label控件的值。

1. 使用AWStudio創(chuàng)建項(xiàng)目

在開始設(shè)計(jì)UI前，我們在之前安裝好的AWStudio中新建一個項(xiàng)目，注意新建項(xiàng)目時類型要選擇“AWTK Application”。

圖2 使用AWStudio創(chuàng)建項(xiàng)目

AWTK Designer是 AWStudio 中內(nèi)置的工具，專門用來制作 AWTK 應(yīng)用程序 UI 界面的實(shí)用工具，下圖是創(chuàng)建好項(xiàng)目后的界面：

圖3 創(chuàng)建項(xiàng)目后進(jìn)入AWTK Designer的UI設(shè)計(jì)界面

使用AWTK Designer設(shè)計(jì)UI界面

首先參照預(yù)覽圖，我們需要一個label（靜態(tài)文本）控件和button（按鈕）控件，我們在左側(cè)的控件列表中找到這兩個控件并拖到中間的控件編輯欄中：

圖4 放置首頁的label控件與button控件

1. 設(shè)置首頁label控件與button控件文本及樣式

首先我們修改控件的文本以及字體樣式，修改控件文本有兩種方式，一種是雙擊控件直接修改，另一種是修改控件的text屬性。除了text屬性之外，還可以通過設(shè)置font_size屬性修改字體的字號，修改完畢后效果圖如下：

圖5 首頁label控件和button控件的字號設(shè)計(jì)與顯示效果

2. 新建第二個頁面并進(jìn)行布局

接下來我們設(shè)計(jì)第二個頁面，我們通過AWTK Designer上方的編輯-新建窗體選項(xiàng)新建一個窗口（Window），設(shè)置好窗體設(shè)置欄中的名稱，操作如下圖：

圖6 使用AWTK Designer新建窗口

按照圖1的效果圖將第二個頁面所需控件拖拽出來，并進(jìn)行屬性調(diào)整。
另外，由于我們的edit只用來改變進(jìn)度條的值，這個值是非負(fù)整數(shù)，所以將edit的input_type屬性修改成“uint”。image控件顯示圖片前需要將圖片添加到資源瀏覽器，再到控件中設(shè)置image屬性為該圖片，如下圖：

圖7 添加圖片資源并應(yīng)用到image控件中

3. 設(shè)置控件的位移動畫

接下來給圖片添加位移動畫，我們選中image控件，在右側(cè)“控件編輯器”-“動畫”選項(xiàng)中添加一個動畫，動畫類型選擇“位移”，然后對照下圖設(shè)置動畫參數(shù)即可。

圖8 使用AWTK Designer設(shè)置控件動畫在完成界面設(shè)計(jì)之后，我們點(diǎn)擊AWTK Designer上方的“打包”按鈕即可將頁面布局文件、資源文件進(jìn)行打包。

添加控件事件并編寫事件處理代碼

項(xiàng)目中我們需要用到按鈕的跳轉(zhuǎn)以及修改edit控件值同步改變進(jìn)度條值和label控件顯示文本的效果，我們可以用事件的方式來實(shí)現(xiàn)它們。

1. 使用AWTK Designer為控件添加事件

首先選擇主頁中的button控件，并在右側(cè)的“控件編輯器”中選擇“事件”選項(xiàng)，接著點(diǎn)擊選項(xiàng)卡右上角的加號并選擇“click”事件，添加后效果如圖所示。

圖9 添加控件click事件第二個界面中的button控件也是像上面一樣添加click事件、edit控件添加value_changed（值改變）事件，最后不要忘了保存與打包操作。

2. 在VSCode編寫控件事件處理代碼

我們在VSCode打開Hello工程的目錄，然后找到首頁“home_page.c”代碼文件，打開之后我們只需在AWTK Designer自動生成的事件代碼中寫處理邏輯即可。因?yàn)辄c(diǎn)擊按鈕要跳轉(zhuǎn)界面，所以on_button_click要用到navigator_to接口，參數(shù)填的是要打開窗口的name屬性值。

圖10 事件處理函數(shù)和注冊事件代碼在新窗口的按鈕也是類似，要用到navigator_back_to_home接口，代表回到主頁。
接下來編寫edit控件的value_changed值改變事件處理函數(shù)代碼，本質(zhì)是獲取用戶輸入的值，并將這個值設(shè)置到進(jìn)度條和label控件中，代碼如下：

圖11 edit控件value_changed事件處理代碼

運(yùn)行與調(diào)試

1. 運(yùn)行AWTK程序

在完成項(xiàng)目的界面布局設(shè)計(jì)以及業(yè)務(wù)邏輯代碼編寫之后，我們依次點(diǎn)擊AWTK Designer上方的“打包”、“編譯”和“模擬運(yùn)行”按鈕即可運(yùn)行程序。

圖12 打包、編譯以及模擬運(yùn)行項(xiàng)目

2. 調(diào)試AWTK程序

可以使用Visual Studio Code調(diào)試應(yīng)用程序，具體操作步驟可以瀏覽官方開發(fā)實(shí)踐文檔的《2.7應(yīng)用調(diào)試》。

需要注意在launch.json配置demo程序的啟動路徑，如下圖：

圖13 配置VSCode的調(diào)試程序路徑到這里，我們就完成了Hello工程界面設(shè)計(jì)、業(yè)務(wù)邏輯代碼編寫以及調(diào)試運(yùn)行，如果你在開發(fā)過程中遇到了問題，歡迎在評論區(qū)進(jìn)行討論。