登入
登入
幫助中心

 > 

 > 

4. 以積木式編程製作網絡應用程式 > 
螢幕
螢幕
列印

本文檔介紹如何啟動程式、在螢幕之間導航、調整顯示設置、生成帶有標籤和佈局的螢幕、刪除螢幕以及訪問特定的佈局和標籤元素。

計劃開始

在「開始」時

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>faceDetectionResult</variable><variable>result</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"/></xml>"}

這用於在程序啟動時執行事件。

參數： N/A
輸出： N/A
範例代碼：

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>faceDetectionResult</variable><variable>result</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">Hello World!</field></shadow></value><value name=\"isPreformatted\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></value></block></next></block></next></block></statement></block></xml>"}

輸出：

啟動時 - 輸出

移動到另一個螢幕

轉到螢幕

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Screen_goTo\"><value name=\"screen\"><block type=\"variables_get\"><field name=\"VAR\">secondScreen</field></block></value></block></xml>"}

這用於移動到另一個螢幕。

參數： 螢幕
輸出： N/A
範例代碼：

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>secondLayout</variable><variable>mainScreen</variable><variable>secondScreen</variable><variable>moveToSecond</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">secondLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">secondScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Second</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">secondLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">moveToSecond</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Move to second screen</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">moveToSecond</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">This is main screen.</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">secondLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">This is second screen.</field></shadow></value></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">moveToSecond</field></block></value><statement name=\"HANDLER\"><block type=\"Screen_goTo\"><value name=\"screen\"><block type=\"variables_get\"><field name=\"VAR\">secondScreen</field></block></value></block></statement><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">218</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">185</field></shadow></value></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">secondLayout</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">191</field></shadow></value></block></value><next><block type=\"Styling_setFlexShorthand\"><field name=\"flexShorthand\">FlexShorthand.Auto</field><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><next><block type=\"Styling_setFlexShorthand\"><field name=\"flexShorthand\">FlexShorthand.Auto</field><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">secondLayout</field></block></value></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

輸出：

轉到螢幕 - 輸出 1

點選「移至第二個螢幕」按鈕後：

轉到螢幕 - 輸出 2

更改螢幕上的顯示設置

將螢幕模式設置為選項卡

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Screen_setMode\"><field name=\"mode\">ScreenMode.Tab</field></block></xml>"}

這用於將螢幕模式設置為選項卡或單頁。

參數： 條件：Tab 表（預設）/單頁
輸出： N/A
範例代碼：

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>secondLayout</variable><variable>mainScreen</variable><variable>screen_2</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"Screen_setMode\"><field name=\"mode\">ScreenMode.Tab</field><next><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">secondLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">screen_2</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Second</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">secondLayout</field></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">This is main layout.</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">secondLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">This is second layout.</field></shadow></value></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">218</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">185</field></shadow></value></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">secondLayout</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">191</field></shadow></value></block></value><next><block type=\"Styling_setFlexShorthand\"><field name=\"flexShorthand\">FlexShorthand.Auto</field><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><next><block type=\"Styling_setFlexShorthand\"><field name=\"flexShorthand\">FlexShorthand.Auto</field><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">secondLayout</field></block></value></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

將螢幕模式設定為 tab 時的輸出：

將螢幕模式設定為 tab - 輸出

將螢幕模式設定為「單頁」時的輸出：

將螢幕模式設置為單頁 - 輸出

生成帶有標籤和布局的螢幕

設置螢幕以創建帶有標籤“”和佈局的螢幕

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"variables_set\"><field name=\"VAR\">screen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\"/></shadow></value></block></value></block></xml>"}

這用於創建用於顯示佈局的螢幕。

參數：

  • 螢幕
  • 字串
  • 屏幕專案

輸出： N/A
範例代碼：

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">This is Main.</field></shadow></value></block></value></block></next></block></next></block></statement></block></xml>"}

輸出：

設置螢幕以建立帶有標籤和佈局的螢幕 - 輸出設定螢幕以建立帶有標籤和佈局的螢幕 - 輸出

脫下螢幕

拿掉螢幕

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Screen_Screen_remove\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">screen</field></block></value></block></xml>"}

這用於刪除相關螢幕。

參數： 螢幕
輸出： N/A
範例代碼：

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>removeScreenButton</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">Here is Main Screen.</field></shadow></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">removeScreenButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Remove Screen</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">removeScreenButton</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">removeScreenButton</field></block></value><statement name=\"HANDLER\"><block type=\"Screen_Screen_remove\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainScreen</field></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

在主螢幕中的輸出：

拿掉螢幕 - 輸出 1

按兩下刪除螢幕按鈕後：

拿掉螢幕 - 輸出 2

訪問佈局

螢幕獲取佈局

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Screen_Screen_getLayout\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">screen</field></block></value></block></xml>"}

這用於以最短的方式獲取佈局。

參數： 螢幕
輸出： 螢幕
範例代碼：

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainScreen</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"ScreenItem_createLayout\"/></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"Screen_Screen_getLayout\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainScreen</field></block></value></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">This is a layout in Main Screen.</field></shadow></value></block></value></block></next></block></statement></block></xml>"}

輸出：

螢幕獲取佈局 - 輸出

訪問標籤

屏幕獲取標籤

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Screen_Screen_getLabel\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">screen</field></block></value></block></xml>"}

這用於在程序啟動時執行事件。

參數： 螢幕
輸出： 螢幕
範例代碼：

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><block type=\"Screen_Screen_getLabel\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainScreen</field></block></value></block></value></block></value></block></next></block></next></block></statement></block></xml>"}

輸出：

螢幕獲取標籤 - 輸出

目録