[Solar2D] 程式設計教學：利用 Composer 在應用程式中切換頁面

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

在先前的範例中，我們的程式皆位在單一頁面上；透過 Solar2D 提供的 composer 函式庫，我們的程式可在不同頁面間切換。我們將完整的程式碼放在這裡，本文僅節錄部分內容。

程式的示意圖如下：

{{< figure src="img/corona-sdk/composer.png" alt="Solar2D 的 Composer 範例" class="phone" >}}

本範例的 main.lua 相當簡單：

local composer = require("composer")

composer.gotoScene("index")

因為我們的主程式只是用來過水到第一個場景 (scene) 而已。

由於場景的程式碼比較長，在觀看真正的程式碼前，我們先將架構的部分抽出來看：

local composer = require("composer")

local scene = composer.newScene()

-- create()
function scene:create( event )
end

-- show()
function scene:show( event )
end

-- hide()
function scene:hide( event )
end

-- destroy()
function scene:destroy( event )
end

scene:addEventListener( "create", scene )
scene:addEventListener( "show", scene )
scene:addEventListener( "hide", scene )
scene:addEventListener( "destroy", scene )

return scene

在 Solar2D 程式中，場景要寫成 Lua 模組 (module)，供其他程式呼叫。如果不熟模組如何撰寫，可以參考這裡的說明。

場景有 "create"、"show"、"hide"、"destroy" 四個生命階段，分別對應頁面生成、顯示、隱藏、銷毀等不同階段。我們在撰寫 Solar2D 的場景時，就是依照這樣的架構，各自填入不同階段所要進行的行為即可。

接下來，我們會用本範例程式展示場景的四個階段。

在一開始，我們先準備一段無意義的文字 (lorem ipsum)，用來填充版面：

local text = "Lorem ipsum dolor sit amet, vix ut persius laoreet consulatu, "
  .. "et populo equidem fastidii vel. Usu no scripta similique. "
  .. "Numquam fabellas his ex. Et ius dictas dolores forensibus, "
  .. "ea propriae salutatus sea. Per ei veri dicta conclusionemque, "
  .. "exerci eripuit per ex, tale appareat efficiendi nec et."

這種無意義文字稱為 lorem ipsum，主要的用途是用一些沒有實際意義的文字填塞版面，用來看排版的效果，在國外的網頁教學有時候會看到這個東西。

如果讀者需要一些填塞版面的文字，不用自己生，網路上可以找到一些生成器，像是這個。

在 create 階段，我們產生三個物件，程式碼如下：

-- create()
function scene:create( event )
  local sceneGroup = self.view

  local title = display.newText(
    {
      text = "My App",
      x = display.contentWidth * 0.5,
      y = display.contentHeight * 0.12,
      fontSize = 28,
    }
  )

  title:setFillColor(0 / 255, 0 / 255, 0 / 255)

  sceneGroup:insert(title)

  local content = display.newText(
    {
      text = text,
      x = display.contentWidth * 0.5,
      y = display.contentHeight * 0.45,
      width = display.contentWidth * 0.9,
      fontSize = 18,
    }
  )

  content:setFillColor(0 / 255, 0 / 255, 0 / 255)

  sceneGroup:insert(content)

  local btnNext = widget.newButton(
    {
      x = display.contentWidth * 0.5,
      y = display.contentHeight * 0.85,
      label = "Next",
      fontSize = 20,
      emboss = false,
      shape = "roundedRect",
      width = 100,
      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},
      },
      onEvent = function (ev)
        composer.gotoScene("next")
      end
    }
  )

  sceneGroup:insert(btnNext)
end

這些物件的生成方式我們先前都看過了，此處的重點在於用 sceneGroup 將這些物件串連起來，之後就可以一起調整其可視度。另外注意我們將切換場景的動作藏在按鈕的事件處理器中。

在 show 階段中，又會在細分兩個時期，分別是 "will" 和 "did"，前者在場照即將開始時發動，後者則是在場景顯示在螢幕後發動。程式碼參考如下：

-- show()
function scene:show( event )

  local sceneGroup = self.view
  local phase = event.phase

  if ( phase == "will" ) then
    sceneGroup.isVisible = true
  elseif ( phase == "did" ) then

  end
end

有關該場景的詳細說明在此，讀者可自行參考。

同樣地，在 hide 階段也分為兩階段：

function scene:hide( event )
  local sceneGroup = self.view
  local phase = event.phase

  if ( phase == "will" ) then

  elseif ( phase == "did" ) then
    sceneGroup.isVisible = false
  end
end

有關該場景的詳細說明在此。

在 destroy 階段，我們會將物件銷毀，以釋放記憶體等系統資源：

function scene:destroy( event )
  local sceneGroup = self.view
  -- Code here runs prior to the removal of scene's view

  sceneGroup:removeSelf()
end

在本範例程式中共有三個場景，另兩個場景的概念雷同，故不重覆展示。