擴充現有欄位

如要擴充現有欄位，您必須將內建欄位的子類別 (例如 FieldTextInput、FieldColour)，然後根據自身需求修改部分內容。 以下列舉幾個可修改的欄位：

如果您要建立 自訂欄位 任何內建欄位皆不需要行為，應將 Field 設為子類別。

常見擴充功能

大多數的自訂欄位會擴充以下三種類型的其中一種：

  • 文字輸入：如果您希望使用者能夠在欄位中輸入文字，建議您擴充 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 MyCustomTextField(value);
}

如要進一步瞭解如何註冊欄位，請參閱 JSON 和註冊 部分。