[Solar2D] 程式設計教學：使用 Radio Button 和 Checkbox 等表單按鈕

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

在本文中，我們展示 Radio Button 和 Checkbox 等元件的使用方式。這兩種元件都是給使用者做為選項的元件，其差別在於 Radio Button 只能單選 (即多選一)，而 Checkbox 可複選。我們將範例放在這裡，本文僅節錄部分內容。

程式的示意圖如下：

{{< figure src="/img/corona-sdk/radio-button-and-checkbox.png" alt="Solar2D 的 radio button 和 checkbox" class="phone" >}}

由於這個範例所要繪製的元件數量較多，我們將位置相關的參數拉出來成獨立的變數，之後可透過調整這些參數來調整元件的位置：

-- Init some location related parameters.
local radioLocX = 0.15
local radioLocY = 0.35
local radioOffset = 0.08

local itemLocX = 0.72
local itemLocY = 0.43

local textWidth = 150
local textLocX = 0.45

接著，我們撰寫 Radio Buttons 的 event listener。由於所有的按鈕皆使用同一個 listener，我們要在這裡偵測目前按的 button 為那一個，偵測的方法是透過檢查 switch.id。在本例中，我們選擇不同子項目時，程式會繪製不同的多邊形：

-- Init a Shape object.
local item = display.newCircle(display.contentWidth * itemLocX, display.contentHeight * itemLocY, 35)
item:setFillColor(255 / 255, 0 / 255, 0 / 255)

-- Declare the listener for radio Switch object.
local function onSwitchPress( event )
  local switch = event.target

  if switch.id == "RadioButton1" then
    item:removeSelf()

    item = display.newCircle(display.contentWidth * itemLocX, display.contentHeight * itemLocY, 35)
    item:setFillColor(255 / 255, 0 / 255, 0 / 255)
  elseif switch.id == "RadioButton2" then
    item:removeSelf()

    item = display.newRoundedRect(display.contentWidth * itemLocX, display.contentHeight * itemLocY, 75, 50, 10)
    item:setFillColor(0 / 255, 255 / 255, 0 / 255)
  elseif switch.id == "RadioButton3" then
    item:removeSelf()

    item = display.newPolygon(display.contentWidth * itemLocX, display.contentHeight * itemLocY,
      {-30, -35, -30, 35, 40, 0})
    item:setFillColor(0 / 255, 0 / 255, 255 / 255)
  end
end

我們以 radioBtn1 和 btnText1 物件為例，來看如何建立 radio button。在 Solar2D 程式中，radio button 的圓形按鈕和附帶的文字是分開的物件，程式人要自己設定好相對位置，看起來才會對齊。另外，要記得將 radioBtn1 加入 radioGroup 群組中，這樣按鈕間才會有連動關係：

-- Init a Group object for radio switches.
local radioGroup = display.newGroup()

-- Init the first radio Switch object.
local radioBtn1 = widget.newSwitch(
  {
    x = display.contentWidth * radioLocX,
    y = display.contentHeight * (radioLocY+ radioOffset * 0),
    id = "RadioButton1",
    style = "radio",
    initialSwitchState = true,
    onPress = onSwitchPress
  }
)

-- Insert the first object into the group.
radioGroup:insert(radioBtn1)

-- Init the text object for the first radio Switch object.
local btnText1 = display.newText(
  {
    text = "Circle",
    x = display.contentWidth * textLocX,
    y = display.contentHeight * (radioLocY + radioOffset * 0),
    fontSize = 20,
    width = textWidth,
  }
)

btnText1:setFillColor({ 0, 0, 0 })

radioBtn2 和 radioBtn3 用相同的概念也可寫出來，此處不重覆。

接著，我們由 checkBtn 物件來看 checkbox 如何撰寫。如同 radio button，checkbox 的方型按鈕和其附帶的文字也是分開的，要由程式人自行調整好相對位置。另外，每個 checkbox 按鈕是獨立的，每個 checkbox 會有自己獨立的 event listener：

-- Declare the holder of the checkbox Switch object.
local checkBtn

-- Declare the listener of the checkbox Switch object.
local function onCheckboxPress( event )
  local switch = event.target

  if switch.isOn then
    native.showAlert("Checkbox Event", "Checkmate", { "OK" },
      function ( ev )
        if ev.action == "clicked" then
          checkBtn:setState({isOn = false})
        end
      end)
  end
end

-- Init the checkbox Switch object.
checkBtn = widget.newSwitch(
  {
    x = display.contentWidth * radioLocX,
    y = display.contentHeight * (radioLocY + radioOffset * 3 + 0.03),
    style = "checkbox",
    onPress = onCheckboxPress,
  }
)

-- Init the text object for the checkbox object.
local checkboxText = display.newText(
  {
    text = "Check Me",
    x = display.contentWidth * textLocX,
    y = display.contentHeight * (radioLocY + radioOffset * 3 + 0.03),
    fontSize = 20,
    width = textWidth,
  }
)

checkboxText:setFillColor(0, 0, 0)

在本例中，我們用 Solar2D 內建的 native.showAlert 來製作警示對話框，讀者可到這裡查詢其 API。