Corona SDK 程式設計教學:元件 (Widgets)、事件 (Events)、處理器 (Handlers)

PUBLISHED ON SEP 11, 2018 — MOBILE

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

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

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

    專案的示意圖如下:

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

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

    我們的程式很簡單,也是放在單一的 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},
        }
    })
    

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