擴充現有欄位

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

如果您要建立 自訂欄位 任何內建欄位皆不需要行為,應將 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 MySubclassName(value);
}

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