Scratch3.0二次开发：Scratch——Fields积木表单元素介绍

1.前言

在前面介绍自定义积木块组件的到时候，我们经常用到下面的这个type。下面我们将进行type的介绍。

//模仿等待
Blockly.Blocks['new_controls_wait_until'] = {
  /**
   * Block to wait until a condition becomes true.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "id": "new_controls_wait_until",
      "message0": "模仿等待%1",
      "args0": [
        {
          "type": "input_value",
          "name": "CONDITION",
          "check": "Boolean"
        }
      ],
      "category": Blockly.Categories.control,
      "extensions": ["colours_control", "shape_statement"]
    });
  }
};

tool-box-xml.js中的代码为

  <block id="new_controls_wait_until" type="new_controls_wait_until">
    <value name="CONDITION">
                <shadow type="math_number">
                    <field name="NUM">1</field>
                </shadow>
            </value>
    </block>

2. “type”: “input_value”

这个说明我们定义的为一个输入框。
实际效果为。

2. “type”: “field_dropdown”

这个说明我们定义的为一个下拉框,"options"中为我们定义的选项。

//模仿等待
Blockly.Blocks['new_controls_wait_until'] = {
  /**
   * Block to wait until a condition becomes true.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "id": "new_controls_wait_until",
      "message0": "模仿等待%1",
      "args0": [
        {
          "type": "field_dropdown",
          "name": "PLANE_OPENMAGNWT",
          "options": [
            ['选项一', "0"],
            ['选项二', "1"],  
          ]
        }
      ],
      "category": Blockly.Categories.control,
      "extensions": ["colours_control", "shape_statement"]
    });
  }
};

实际效果为

3. “type”: “field_image”

这个代表我们定义的为一个图片，src为图片的地址。width为宽度，height为宽度

//模仿等待
Blockly.Blocks['new_controls_wait_until'] = {
  /**
   * Block to wait until a condition becomes true.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "id": "new_controls_wait_until",
      "message0": "模仿等待%1",
      "args0": [
        {
          "type": "field_image",
          "src": Blockly.mainWorkspace.options.pathToMedia + "play.svg",
          "width": 24,
          "height": 24,
          "alt": "flag"
        }
      ],
      "category": Blockly.Categories.control,
      "extensions": ["colours_control", "shape_statement"]
    });
  }
};

实际效果。

4. “type”: “field_checkbox”,

这个为复选框，复选框元素存储一个字符串作为其值，以及一个字符串作为其文本。 其值为"TRUE”或"FALSE"。

//模仿等待
Blockly.Blocks['new_controls_wait_until'] = {
  /**
   * Block to wait until a condition becomes true.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "id": "new_controls_wait_until",
      "message0": "模仿等待%1",
      "args0": [
        {
          "type": "field_checkbox",
          "name": "FIELDNAME",
          "checked": true
        }
      ],
      "category": Blockly.Categories.control,
      "extensions": ["colours_control", "shape_statement"]
    });
  }
};

实际效果为

5.“type”: “field_number”

这个为数字值，数字元素存储数字作为其值，并存储字符串作为其文本。它的值始终是有效的数字，该数字由创建时赋予该元素的约束定义；它的文本可以是输入到其编辑器中的任何字符串。

//模仿等待
Blockly.Blocks['new_controls_wait_until'] = {
  /**
   * Block to wait until a condition becomes true.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "id": "new_controls_wait_until",
      "type": "example_angle",
      "message0": "模仿等待%1",
      "args0": [
        {
          "type": "field_number",
          "name": "FIELDNAME",
          "value": 100,
          "min": 0,
          "max": 100,
          "precision": 10
        }
      ],
      "category": Blockly.Categories.control,
      "extensions": ["colours_control", "shape_statement"]
    });
  }
};

实际效果

6.“type”: “field_variable”

变量元素存储一个字符串作为其值，并存储一个字符串作为其文本。 值是变量的ID，而文本是变量的名称。

//模仿等待
Blockly.Blocks['new_controls_wait_until'] = {
  /**
   * Block to wait until a condition becomes true.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "id": "new_controls_wait_until",
      "type": "example_angle",
      "message0": "模仿等待%1",
      "args0": [
        {
          "type": "field_variable",
        
        }
      ],
      "category": Blockly.Categories.control,
      "extensions": ["colours_control", "shape_statement"]
    });
  }
};

实际效果

作者简介
热爱编程、写作的小菜鸡，喜交天下各路英雄好友，欢迎关注本人公众号一起学习、交流。
如果您遇到什么问题请给我留言。
需要资料的小伙伴，请关注公众号联系！

关注我，一起学习探讨更多scratch-block知识！