擴充現有欄位

如要擴充現有欄位，您必須對內建欄位 (例如 FieldTextInput、FieldColour) 建立子類別，然後根據需求修改欄位的一部分。您可以修改的欄位包括：

如果您想建立自訂欄位，但這些欄位不需要透過任何內建欄位的行為，則應將 Field 設為子類別。

常用擴充功能

多數自訂欄位會延伸以下三種類型之一：

  • Text Input：如果您希望使用者輸入欄位內容，應擴充 FieldTextInput。
  • 數字：如要儲存數字，請擴充 FieldNumber。
  • 下拉式選單：如果您想建立下拉式選單，但想要儲存與預設字串或圖片模型不同的模型，請擴充 FieldDropdown。
    • 注意：在擴充 FieldDropdown 之前，請確認下拉式選單欄位的自訂選項無法滿足您的需求。

在某些情況下，您可能需要擴充不同欄位類型。例如，FieldLabelSerializable 擴充 FieldLabel。

子類別

import * as Blockly from 'blockly';

export class MyCustomTextField extends Blockly.FieldTextInput {

  constructor(value, validator, config) {
    super(value, validator, config);
  }
}

欄位子類別的建構函式與自訂欄位的建構函式非常相似。子建構函式的簽名通常應與上層建構函式的簽章相符。

JSON 和註冊

您也應註冊該欄位一次：

Blockly.fieldRegistry.register('my_custom_text_field', MyCustomTextField);

並在類別中提供 fromJson 的實作方式，使其能與 JSON 格式搭配運作：

static fromJson(options) {
  const value = Blockly.utils.parsing.replaceMessageReferences(options.value);
  return new MySubclassName(value);
}

如要進一步瞭解如何註冊欄位，請參閱「建立自訂欄位」中的 JSON 和註冊一節。