開源技術教學文件網 使用 Radio Button 和 Checkbox 等表單按鈕

最後修改日期為 NOV 8, 2018

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

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

程式的示意圖如下:

Solar2D 的 radio button 和 checkbox

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

-- 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

我們以 radioBtn1btnText1 物件為例,來看如何建立 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 })

radioBtn2radioBtn3 用相同的概念也可寫出來,此處不重覆。

接著,我們由 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。

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