预设块

您可以配置(预设)工具箱中区块的状态。例如,您可以将字段设置为默认值,或将两个区块连接在一起。您还可以 创建 影子区块,这些区块充当子 区块的默认值。

示例

以下是一些预设区块的示例。

具有预设字段值的区块

下面是一个 math_number 区块,其字段显示数字 42,而不是默认值 0:

一种数值预设为 42 的数字块。

下面是一个用于设置此字段的工具箱:

JSON

{
 "kind": "flyoutToolbox",
 "contents": [
   {
     "kind": "block",
     "type": "math_number",
     "fields": {
       "NUM": 42
     }
   },
 ]
}

XML

<xml id="toolbox" style="display: none">
 <block type="math_number">
   <field name="NUM">42</field>
 </block>
</xml>

预连接的区块

下面是一个 controls_for 区块,其中连接了三个 math_number 区块:

“从某个值到某个值(按某个值递增)的计数”块。这三个值输入连接到值为 1、10 和 1 的数字块。

下面是一个用于预连接这些区块的工具箱:

JSON

{
 "kind": "flyoutToolbox",
 "contents": [
   {
     "kind": "block",
     "type": "controls_for",
     "inputs": {
       "FROM": {
         "block": {
           "type": "math_number",
           "fields": {
             "NUM": 1
           }
         }
       },
       "TO": {
         "block": {
           "type": "math_number",
           "fields": {
             "NUM": 10
           }
         }
       },
       "BY": {
         "block": {
           "type": "math_number",
           "fields": {
             "NUM": 1
           }
         }
       },
     }
   },
 ]
}

XML

<xml id="toolbox" style="display: none">
 <block type="controls_for">
   <value name="FROM">
     <block type="math_number">
       <field name="NUM">1</field>
     </block>
   </value>
   <value name="TO">
     <block type="math_number">
       <field name="NUM">10</field>
     </block>
   </value>
   <value name="BY">
     <block type="math_number">
       <field name="NUM">1</field>
     </block>
   </value>
 </block>
</xml>

已停用的区块

无法从工具箱中拖动已停用的区块。可以使用可选的 disabled 属性单独停用区块。

一个包含三个块的弹出式菜单。第三个块已停用,并显示为灰色。

JSON

{
 "kind": "flyoutToolbox",
 "contents": [
   {
     "kind": "block",
     "type":"math_number"
   },
   {
     "kind": "block",
     "type": "math_arithmetic"
   },
   {
     "kind": "block",
     "type": "math_single",
     "disabled": "true"
   }
 ]
}

XML

<xml id="toolbox" style="display: none">
 <block type="math_number"></block>
 <block type="math_arithmetic"></block>
 <block type="math_single" disabled="true"></block>
</xml>

您还可以使用 setDisabledReason以编程方式停用或启用区块。

配置区块

您可以在工具箱中以在工作区中配置区块的任何方式配置区块。例如,您可以设置字段值、将区块连接到值或语句输入、添加注释,以及收起或停用区块。之所以可以这样做,是因为工具箱使用与工作区用于序列化区块相同的代码来配置区块。

这也意味着您可以轻松创建区块配置。只需将区块加载到工作区中,根据需要进行配置,然后在控制台中运行以下代码对其进行序列化。

JSON

console.log(Blockly.serialization.workspaces.save(Blockly.getMainWorkspace()));

XML

console.log(Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace()));

然后,您可以复制配置代码并将其粘贴到工具箱中。请务必移除工具箱会忽略的 xyid 属性。

变量字段

当变量字段位于工具箱中时,可能需要以不同于序列化时的指定方式来指定变量字段。

具体而言,当变量字段通常序列化为 JSON 时,它们仅包含其所代表变量的 ID,因为变量的名称和类型是单独序列化的。但是,工具箱不包含该信息,因此需要直接将其包含在变量字段中。

{
  "kind": "flyoutToolbox",
  "content": [
    {
      "kind": "block",
      "type": "controls_for",
      "fields": {
        "VAR": {
          "name": "index",
          "type": "Number"
        }
      }
    }
  ]
}

影子区块

影子区块是占位符区块,可执行以下几项功能:

  • 它们表示父区块的默认值。
  • 它们允许用户直接输入值,而无需提取数字或字符串区块。
  • 与常规区块不同,如果用户将区块拖放到其上,它们会被替换。
  • 它们会告知用户预期值的类型。

如需创建影子区块,请使用 shadow 属性 (JSON) 或 <shadow> 标记 (XML),而不是 block 属性或 <block> 标记。例如,下面是一个 math_arithmetic 区块,其中连接了两个 math_number 影子区块:

一个 `math_arithmetic` 块,其中包含两个值输入,这两个输入之间以一个运算符下拉菜单分隔,该下拉菜单中选择了加号运算符。每个值输入都包含一个阴影数字块,该块呈灰显状态,表示可以替换为另一个块。

下面是一个使用这些影子区块的工具箱:

JSON

{
 "kind": "flyoutToolbox",
 "contents": [
   {
     "kind": "block",
     "type": "math_arithmetic",
     "fields": {
       "OP": "ADD"
     },
     "inputs": {
       "A": {
         "shadow": {
           "type": "math_number",
           "fields": {
             "NUM": 1
           }
         }
       },
       "B": {
         "shadow": {
           "type": "math_number",
           "fields": {
             "NUM": 1
           }
         }
       }
     }
   },
 ]
}

XML

<xml id="toolbox" style="display: none">
 <block type="math_arithmetic">
   <field name="OP">ADD</field>
   <value name="A">
     <shadow type="math_number">
       <field name="NUM">1</field>
     </shadow>
   </value>
   <value name="B">
     <shadow type="math_number">
       <field name="NUM">1</field>
     </shadow>
   </value>
 </block>
</xml>