研究問卷調查：與我們分享您使用 Blockly 的體驗

本頁面由 Cloud Translation API 翻譯而成。

下拉式選單欄位

下拉式選單欄位會將字串儲存為值，並將字串儲存為文字。值是一種語言中立的鍵，用於存取文字並將不會翻譯任何語言。文字是向使用者顯示的字串。

下拉式選單欄位

開啟編輯器的下拉式選單欄位

收合區塊中的下拉式選單欄位

創作

下拉式選單建構函式會採用選單產生器，且選用屬性驗證工具。選單產生器有許多基本上是一系列選項的陣列，每個選項都含有和語言中立的字串

簡易文字下拉式選單

開啟含有兩個文字選項的下拉式選單

JSON

{
  "type": "example_dropdown",
  "message0": "drop down: %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "FIELDNAME",
      "options": [
        [ "first item", "ITEM1" ],
        [ "second item", "ITEM2" ]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['example_dropdown'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('drop down:')
        .appendField(new Blockly.FieldDropdown([
            ['first item', 'ITEM1'],
            ['second item', 'ITEM2']
        ]), 'FIELDNAME');
  }
};

將人類可讀的資訊與語言中立金鑰區隔開來可讓下拉式選單的設定保留不同語言。適用對象區塊的英文版本可能會定義 [['left', 'LEFT'], ['right', 'RIGHT]]，而相同區塊的德文版本則會定義 [['links', 'LEFT'], ['rechts', 'RIGHT]]。

圖片下拉式選單

下拉式選單中的選項也可能是圖片，而不是文字。圖片物件已指定 src、width、height 和 alt 屬性。

請注意，雖然下拉式選單可以混合使用文字選項和圖片選項單一選項目前無法同時包含圖片和文字。

包含圖片和文字的下拉式選單欄位

JSON

{
  "type": "image_dropdown",
  "message0": "flag %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "FLAG",
      "options": [
        ["none", "NONE"],
        [{"src": "canada.png", "width": 50, "height": 25, "alt": "Canada"}, "CANADA"],
        [{"src": "usa.png", "width": 50, "height": 25, "alt": "USA"}, "USA"],
        [{"src": "mexico.png", "width": 50, "height": 25, "alt": "Mexico"}, "MEXICO"]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['image_dropdown'] = {
  init: function() {
    var input = this.appendDummyInput()
        .appendField('flag');
    var options = [
        ['none', 'NONE'],
        [{'src': 'canada.png', 'width': 50, 'height': 25, 'alt': 'Canada'}, 'CANADA'],
        [{'src': 'usa.png', 'width': 50, 'height': 25, 'alt': 'USA'}, 'USA'],
        [{'src': 'mexico.png', 'width': 50, 'height': 25, 'alt': 'Mexico'}, 'MEXICO']
    ];
    input.appendField(new Blockly.FieldDropdown(options), 'FLAG');
  }
};

動態下拉式選單

包含星期幾的下拉式選單欄位

JSON

{
  "type": "dynamic_dropdown",
  "message0": "day %1",
  "args0": [
    {
      "type": "input_dummy",
      "name": "INPUT"
    }
  ],
  "extensions": ["dynamic_menu_extension"]
}

Blockly.Extensions.register('dynamic_menu_extension',
  function() {
    this.getInput('INPUT')
      .appendField(new Blockly.FieldDropdown(
        function() {
          var options = [];
          var now = Date.now();
          for(var i = 0; i < 7; i++) {
            var dateString = String(new Date(now)).substring(0, 3);
            options.push([dateString, dateString.toUpperCase()]);
            now += 24 * 60 * 60 * 1000;
          }
          return options;
        }), 'DAY');
  });

請使用 JSON 擴充功能。

JavaScript

Blockly.Blocks['dynamic_dropdown'] = {
  init: function() {
    var input = this.appendDummyInput()
      .appendField('day')
      .appendField(new Blockly.FieldDropdown(
        this.generateOptions), 'DAY');
  },

  generateOptions: function() {
    var options = [];
    var now = Date.now();
    for(var i = 0; i < 7; i++) {
      var dateString = String(new Date(now)).substring(0, 3);
      options.push([dateString, dateString.toUpperCase()]);
      now += 24 * 60 * 60 * 1000;
    }
    return options;
  }
};

您也可以為下拉式選單提供函式而非靜態清單選項。這個函式應傳回相同 [human-readable-value, language-neutral-key] 中的選項陣列做為靜態選項每當使用者點擊下拉式選單時並重新計算選項

序列化

JSON

下拉式選單欄位的 JSON 格式如下所示：

{
  "fields": {
    "FIELDNAME": "LANGUAGE-NEUTRAL-KEY"
  }
}

其中 FIELDNAME 是參照下拉式選單欄位的字串，值為要套用至欄位的值。此值應為語言中立選項鍵。

XML

下拉式選單欄位的 XML 如下所示：

<field name="FIELDNAME">LANGUAGE-NEUTRAL-KEY</field>

其中的 name 屬性含有參照下拉式選單的字串欄位，而內部文字則是要套用至欄位的值。內部文字應為有效的中性選項鍵。

自訂

下拉式箭頭

Blockly.FieldDropdown.ARROW_CHAR 屬性可用來代表下拉式選單箭頭的 Unicode 字元。

包含自訂箭頭的下拉式選單欄位

在 Android 裝置上，ARROW_CHAR 屬性預設為 \u25BC (▼)，\u25BE (▾) 反之。

這是全域屬性，因此會在設定時修改所有下拉式選單欄位。

選單高度

Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH 屬性可用來選單的高度上限。定義為也就是可視區域做為視窗大小

MAX_MENU_HEIGHT_VH 屬性的預設值為 0.45。

這是全域屬性，因此會在設定時修改所有下拉式選單欄位。

前置/後置字串比對

如果所有下拉式選單選項都共用相同的前置字元和/或後置字元系統會自動將這些字詞排除在外，並插入為靜態文字。舉例來說，以下是建立相同區塊的兩種方法 (第一種沒有後置字串比對，第二個則是：

沒有後置字串比對：

JSON

{
  "type": "dropdown_no_matching",
  "message0": "hello %1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        ["world", "WORLD"],
        ["computer", "CPU"]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['dropdown_no_matching'] = {
  init: function() {
    var options = [
      ['world', 'WORLD'],
      ['computer', 'CPU']
    ];

    this.appendDummyInput()
        .appendField('hello')
        .appendField(new Blockly.FieldDropdown(options), 'MODE');
  }
};

使用後置字串比對：

JSON

{
  "type": "dropdown_with_matching",
  "message0": "%1",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        ["hello world", "WORLD"],
        ["hello computer", "CPU"]
      ]
    }
  ]
}

JavaScript

Blockly.Blocks['dropdown_with_matching'] = {
  init: function() {
    var options = [
      ['hello world', 'WORLD'],
      ['hello computer', 'CPU']
    ];

    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown(options), 'MODE');
  }
};

這種做法的優點之一是翻譯成其他語言。先前的程式碼包含 'hello'、'world' 和 'computer'，而修改過的程式碼包含字串 'hello world' 和 'hello computer'。不過，譯者翻譯詞組會比產生字詞

這種方法的另一個優點是，字詞順序通常會在語言。假設有一個語言是使用 'world hello' 和 'computer hello'。後置字串比對演算法會偵測並顯示常見的 'hello' 。

但有時會無法比對前置字元/尾碼。在某些情況下這兩個字詞必須共同在一起，而且前置字元不應被排除。舉例來說，'drive red car' 和 'drive red truck' 應只採用引數 'drive'，而非 'drive red'。萬國碼 (Unicode) 非中斷空格 '\u00A0' 可取代一般空間來抑制前置字串/後置字串比對器，因此，上述範例可以用《'drive red\u00A0car'》和《'drive red\u00A0truck'》。

前置字元/尾碼比對失敗的另一個位置使用的語言：請使用空格分隔每個字詞。中文就是個好例子。字串 '訪問中國' 表示 'visit China'，請注意字詞之間缺少空格。最後兩個字元 ('中國') 是 'China' 的字詞，但如果分割的話，就會分別代表 'centre' 和 'country'。要求中文、前置碼比對作業支援中文、只要在適合斷行的地方插入空格即可例如 '訪問中國' 和 '訪問美國' 會產生 "visit [China/USA]"，而 '訪問中國' 和 '訪問美國' 會產生 "visit [centre/beautiful] country"。

建立下拉式選單驗證工具

下拉式選單欄位的值是不受語言限制的字串，因此所有驗證工具都必須接受字串並傳回可用選項、null 或 undefined。

如果驗證工具傳回任何其他內容，則 Blockly 的行為未定義程式可能會當機

舉例來說，你可以定義一個包含三個選項和一個驗證工具，如下所示：

validate: function(newValue) {
  this.getSourceBlock().updateConnections(newValue);
  return newValue;
},

init: function() {
  var options = [
   ['has neither', 'NEITHER'],
   ['has statement', 'STATEMENT'],
   ['has value', 'VALUE'],
  ];

  this.appendDummyInput()
  // Pass the field constructor the options list, the validator, and the name.
      .appendField(new Blockly.FieldDropdown(options, this.validate), 'MODE');
}

validate 一律會傳回傳遞的值，但會呼叫輔助程式函式 updateConnection，可根據下拉式選單新增或移除輸入內容值：

updateConnections: function(newValue) {
  this.removeInput('STATEMENT', /* no error */ true);
  this.removeInput('VALUE', /* no error */ true);
  if (newValue == 'STATEMENT') {
    this.appendStatementInput('STATEMENT');
  } else if (newValue == 'VALUE') {
    this.appendValueInput('VALUE');
  }
}