屏幕 - Una Platform

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

输出：

单击“移至第二个屏幕”按钮后：

更改屏幕上的显示设置

将屏幕模式设置为选项卡

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

这用于将屏幕模式设置为选项卡或单页。

参数： 条件：制表符（默认）/单页
输出： 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 时的输出：

将屏幕模式设置为“单页”时的输出：

生成带有标签和布局的屏幕

设置屏幕以创建带有标签“”和布局的屏幕

{"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>"}

在主屏幕中的输出：

单击“删除屏幕”按钮后：

访问布局

屏幕获取布局

{"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>"}

输出：