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

創(chuàng)建工程

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

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

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

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

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

圖3 創(chuàng)建項目后進入AWTK Designer的UI設計界面

使用AWTK Designer設計UI界面

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

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

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

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

圖5 首頁label控件和button控件的字號設計與顯示效果

2. 新建第二個頁面并進行布局

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

圖6 使用AWTK Designer新建窗口

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

圖7 添加圖片資源并應用到image控件中

3. 設置控件的位移動畫

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

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

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

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

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

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

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

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

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

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

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

運行與調試

1. 運行AWTK程序

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

圖12 打包、編譯以及模擬運行項目

2. 調試AWTK程序

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

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

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