開源技術教學文件網 圖形介面程式的要素 ─ 元件 (Widgets)、事件 (Events)、處理器 (Handlers)

最後修改日期為 SEP 11, 2018

[注意事項] Corona 已改名為 Solar2D

從程式設計的角度來看,Solar2D (原 Corona SDK) 應用程式是一種圖形介面程式,在這類程式中,會採用事件導向 (event-driven) 的方式來撰寫程式。簡單地說,程式圍繞著 UI 元件 (widgets 或 components)、事件 (events) 和其相關的事件處理器 (event handlers) 所組成。本文會從簡單的範例來看如何撰寫這類程式。

在初學的終端機程式 (console applications),程式的執行是線性的,基本上是依程式碼的順序來執行,當所有的程式都執行完畢就離開該程式。而在圖形介面程式中,程式通常不會直接結束掉,而會在初始化後進入一個事件迴圈 (event loops) 中;這時,主程式是等待狀態,待使用者觸發 (trigger) 某個事件後,再執行相對應的事件處理器代碼。一個常見的事件是按按鈕。

接著,我們寫一個簡單的例子,該程式可藉由按按鈕來改變程式上的文字。完整的專案放在這裡,本文僅節錄部分內容。

專案的示意圖如下:

在 Solar2D 程式中,藉由按鈕觸發事件

這個範例也相當簡單,實際有作用的元件就是按鈕的部分,至於文字部分沒有事件處理器,僅被動經由按鈕改變文字。

我們的程式很簡單,也是放在單一的 main.lua 命令稿中,但程式碼略長,故我們分段展示。如果讀者想追蹤完整的程式碼,請到上述的專案網址。

一開始,我們引入 widget 套件,這是為了待會要建立按鈕物件。

-- Import widget.
local widget = require("widget")

我們使用一個局部變數 count 做為按鈕次數的計數器 (counter),將其初始化為 0

-- The internal counter.
local count = 0

接著,建立 text 物件,呼叫先前建立的 count 做為一開始的文字內容的一部分。同樣地,將 text 物件設置為黑色 (black)。

-- Init the text.
local text = display.newText({
    text = count .. " click",
    x = display.contentCenterX,
    y = display.contentHeight * 0.5,
    fontSize = 24,
})

-- Set the color of the text.
text:setFillColor(0 / 255, 0 / 255, 0 / 255)

接著,建立按鈕元件所需的事件處理器 btnListener,在此處理器中,我們會偵測 event.phase,當 event.phase"ended" 時,引發指定的行為。此處指定的行為會將 count11 為單位輪轉 (利用餘數除法),再依據 count 的值修改 text 物件的文字。

-- Declare the listener of the button.
local function btnListener(event)
  if event.phase == "ended" then
    -- Update the counter.
    count = (count + 1) % 11
    
    -- Update the text according to our internal counter.
    if count <= 1 then
      text.text = count .. " click"
    else
      text.text = count .. " clicks"
    end
  end
end

最後,我們建立 button 物件,並將 btnListener 和此物件連結起來。值得注意的是,我們將 fillColor 設成兩種不同的顏色,這樣在按按鈕時就會有提示使用者的效果。其餘的參數設定方式請到這裡觀看官方 API。

-- Init the button.
local button = widget.newButton({
    x = display.contentCenterX,
    y = display.contentHeight * 0.7,
    label = "Tap Me",
    isEnabled = true,
    onEvent = btnListener,
    shape = "rounedRect",
    labelColor = {
      default = { 0 / 255, 0 / 255, 0 / 255},
      over = { 0 / 255, 0 / 255, 0 / 255},
    },
    fillColor = {
      default = { 180 / 255, 255 / 255, 255 / 255},
      over = { 110 / 255, 255 / 255, 255 / 255},
    }
})

在本例中,程式的行為相當簡單,把行為直接寫在事件處理器中即可。對於複雜的程式行為,則建議將行為的部分拉出來,做成單獨的模組,在維護上會比較容易。

分享本文
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Yahoo
追蹤本站
Facebook Facebook Twitter