复选框字段

复选框字段将字符串存储为值,并将字符串存储为文本。其值为 'TRUE''FALSE',文本为 'true''false'

复选框字段

一个带有标签“checkbox:”的块,以及一个带有对勾标记的复选框字段。

收起块中的复选框字段

折叠后的同一代码块。它带有“variable: true”标签,右边缘呈锯齿状,表示它处于收起状态。

创建

JSON

{
  "type": "example_checkbox",
  "message0": "checkbox: %1",
  "args0": [
    {
      "type": "field_checkbox",
      "name": "FIELDNAME",
      "checked": true
    }
  ]
}

JavaScript

Blockly.Blocks['example_checkbox'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('checkbox:')
        .appendField(new Blockly.FieldCheckbox(true), 'FIELDNAME');
  }
};

复选框构造函数会接受一个可选值和一个可选的验证器。可选值应为 'TRUE''FALSE' 或布尔值,否则将默认为 false

序列化

JSON

复选框字段的 JSON 如下所示:

{
  "fields": {
    "FIELDNAME": true
  }
}

其中,FIELDNAME 是引用复选框字段的字符串,而该值是要应用于相应字段的值。该值必须是布尔值。

XML

复选框字段的 XML 如下所示:

<field name="FIELDNAME">TRUE</field>

<field name="FIELDNAME">true</field>

其中,name 属性包含对复选框字段的字符串引用,而内部文本是要应用于该字段的值。内部文本值遵循与构造函数值相同的规则。

请注意,在反序列化和重新序列化后,所有内部文本值都将采用大写形式('TRUE''FALSE')。在比较工作区时,这一点有时非常重要。

自定义

对勾标记字符

您可以使用 Blockly.FieldCheckbox.CHECK_CHAR 属性来更改对勾标记的外观。该值应是一个包含 Unicode 字符的字符串。

复选框字段,其中包含心形标记而非对勾

CHECK_CHAR 属性默认为 \u2713 或 ✓。

这是一个全局属性,因此设置后会修改所有复选框字段。

创建复选框验证器

复选框字段的值为 'TRUE''FALSE',因此验证器应接受这些值(即字符串),并返回 'TRUE''FALSE'nullundefined

以下验证器示例会根据复选框是否处于选中状态来隐藏或显示文本输入字段:

  validate: function(newValue) {
    var sourceBlock = this.getSourceBlock();
    sourceBlock.showTextField_ = newValue == 'TRUE';
    sourceBlock.updateTextField();

    return newValue;
  },

  updateTextField: function() {
    var input = this.getInput('DUMMY');
    if (this.showTextField_ && !this.getField('TEXT')) {
      input.appendField(new Blockly.FieldTextInput(), 'TEXT');
    } else if (!this.showTextField_ && this.getField('TEXT')) {
      input.removeField('TEXT');
    }
  }

带有验证器的复选框字段

一个显示复选框被勾选的 GIF 动画。选中该复选框后,系统会显示一个文本字段。