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

區塊剖析

本文將探討區塊的不同部分。

連線

連線可定義區塊可連線的位置，以及可連線至哪些區塊。

連線分為四種類型：

連線類型	圖片
輸出連線
輸入連線
先前連線
下一個連線

輸出連線和輸入連線可以連結在一起，而後續連線和先前連線也可以連結在一起。您可以使用連線檢查進一步限制連線。

您可以使用自訂轉譯器自訂連線的形狀。

頂層連線

區塊有三個可選用的連結。

一個區塊可能會有單一輸出連線，以區塊前緣的雄性拼圖連接器表示。輸出連線會將區塊的值 (運算式) 傳遞至另一個區塊。含有輸出連線的區塊稱為值區塊。

math_number 程式區塊。

區塊頂端可能有上一個連結 (以缺口表示)，底部則有下一個連結 (以分頁符號表示)。這些元素可讓區塊垂直堆疊，代表一連串陳述式。沒有輸出連結的區塊稱為陳述式區塊，通常會同時具有前後連結。

variables_set 區塊。

詳情請參閱「頂層連線」。

欄位

欄位定義區塊中的大部分 UI 元素。包括字串標籤、下拉式選單、核取方塊、圖片，以及字串和數字等文字資料的輸入內容。例如，這個迴圈區塊會使用標籤欄位、下拉式欄位和數字欄位。

包含多個欄位的區塊。

Blockly 提供多個內建欄位，包括文字輸入、顏色挑選器和圖片。您也可以自行建立欄位。

詳情請參閱「欄位」。

輸入

輸入是欄位和連線的容器。建構區塊時，會將輸入內容以一或多列的形式呈現，就像磚塊一樣。

有四種不同類型的輸入內容，所有類型都包含欄位 (包括標籤)，其中兩種包含單一連結。您也可以建立自訂輸入項，支援自訂轉譯。

輸入類型	連線類型	圖片
虛擬輸入	無
結束列輸入	無
輸入值	輸入連線
陳述式輸入	下一個連線

我們將透過一系列範例介紹這些輸入內容。如要瞭解如何定義組成區塊的輸入內容、連結和欄位，請參閱「JSON 中的區塊結構」和「JavaScript 中的區塊結構」。

虛擬輸入

虛擬輸入只是欄位的容器，沒有連線。舉例來說，下列數字區塊包含單一虛擬輸入內容，其中包含單一數字欄位。

包含虛擬輸入內容和數字欄位的數字區塊。

以較複雜的範例來說，請考慮一個可將兩個數字加總的區塊。這可以從包含三個欄位 (數字、標籤、數字) 的單一虛擬輸入內容建立：

以包含三個欄位的虛擬輸入內容建立的加法區塊。

或三個虛擬輸入值，每個輸入值都有一個欄位：

由三個虛擬輸入建立的加法區塊，每個輸入都包含一個欄位。

資料列結尾輸入

Blockly 會使用經驗法則，決定要將所有輸入內容顯示在單一列中，還是將每個輸入內容顯示在各自的列中。如要確保輸入內容會開始新的資料列，請使用資料列結尾輸入內容做為前一個輸入內容。

和虛擬輸入一樣，資料列結尾輸入可包含欄位，但沒有連線。舉例來說，以下是從包含兩個欄位的列結尾輸入內容和包含一個欄位的虛擬輸入內容所建立的加法區塊。列結尾輸入會強制將虛擬輸入內容轉換為新列。

加法區塊會因行結尾輸入而分成兩列。

值輸入

欄位可接受的內容有限制。舉例來說，數字欄位只接受數字。不過，如果要將兩個變數加起來，該怎麼做呢？或者將程序呼叫的結果加到其他計算的結果？如要解決這個問題，請使用輸入連線，而非欄位。這樣一來，使用者就能將值區塊用作輸入值。

值輸入包含零個或多個欄位，並以輸入連結結尾。下列區塊會將加法區塊中的數字欄位替換為輸入連結。它是由兩個值輸入內容建構而成，第一個不含任何欄位，第二個則包含標籤欄位。兩端都連結至輸入連線。

包含兩個值輸入內容的加法區塊。

陳述式輸入內容

最後一種輸入類型是陳述式輸入，其中包含零個或多個欄位，並以下一個連結結束。下一個連結可讓您在區塊中巢狀堆疊一組陳述式區塊。舉例來說，請考慮下列重複區塊。這個區塊的第二行包含陳述式輸入內容，其中包含單一標籤欄位和下一個連結。

含有陳述式輸入內容的 repeat 區塊，用於巢狀重複陳述式。

陳述式輸入內容一律會在各自的資料列中顯示。您可以在下列 if-then-else 區塊中看到這項功能，該區塊在第一行中提供值輸入內容，並在接下來兩行中提供陳述式輸入內容。

if-then-else 區塊，其中包含用於 then 和 else 陳述式的個別陳述式輸入內容。

內嵌與外部輸入來源

輸入內容可在內嵌或外部呈現。這個屬性可控制值輸入的連接器是在區塊內 (內嵌) 還是在外側邊緣 (外部) 顯示，以及輸入內容是在相同或不同列顯示。

同一個區塊，以內嵌式輸入內容和外部輸入內容分別算一次。

建立自訂區塊時，您可以指定要使用的區塊，也可以讓 Blockly 為您決定。詳情請參閱「內嵌與外部輸入」。

開始運動吧！

如要瞭解輸入內容、欄位和連線，最好的方法是在 Blockly 開發人員工具中建構區塊，並為 inputs 下拉式選單 (automatic、external、inline) 選擇不同的設定。

圖示

除了輸入、連結和欄位之外，區塊還可以包含一或多個圖示。這些符號的用途多種多樣，例如顯示警告、輸入區塊層級註解或顯示變異子 UI。舉例來說，以下是含有留言圖示及其相關編輯器的區塊。

詳情請參閱「圖示」。

區塊和 JavaScript 物件

方塊、輸入內容、連線、欄位和圖示都是 JavaScript 物件。

Blockly 元件	基礎類別	子類別
封鎖	`Block`	`BlockSvg`
輸入	`Input`	`DummyInput`
		`EndRowInput`
		`ValueInput`
		`StatementInput`
		自訂輸入
連線	`Connection`	`RenderedConnection`
欄位	`Field`	`FieldTextInput`
		`FieldNumber`
		`FieldLabel`
		自訂欄位
		其他
圖示	`Icon`	`CommentIcon`
		`MutatorIcon`
		`WarningIcon`
		自訂圖示

區塊中的物件會形成樹狀物件。瞭解區塊的圖形表示法如何與此樹狀結構相符，有助於您編寫程式碼，以程式輔助方式操縱區塊。例如 controls_for 區塊：

包含變數欄位、to、from 和 by 的值輸入項目，以及重複陳述式的陳述式輸入項目的迴圈區塊。

對應至下列 JavaScript 物件樹狀結構。

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}