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

區塊剖析

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

連線

連線會定義積木可連線的位置，以及可連線的積木類型。

主要分為四種：

連線類型	圖片
輸出連線
輸入連線
先前連線
下次聯絡記錄

輸出連線和輸入連線可以互相連接，下一個連線和上一個連線也可以互相連接。您可以透過連線檢查進一步限制連線。

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

頂層連線

方塊有三個連線，可視需要使用。

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

math_number 區塊。

積木頂端可能有先前的連線 (以凹口表示)，底部則可能有下一個連線 (以凸片表示)。這些積木可垂直堆疊，代表一連串的陳述式。沒有輸出連線的積木稱為「陳述式積木」，通常同時具有上一個和下一個連線。

variables_set
區塊。

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

欄位

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

含有多個欄位的區塊。

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

詳情請參閱「欄位」。

輸入

「輸入」是欄位和連線的容器。系統會以一或多列 (如磚塊) 呈現輸入內容，藉此建構方塊。

輸入內容分為四種不同類型，全都可包含欄位 (包括標籤)，其中兩種包含單一連線。您也可以建立自訂輸入內容，支援自訂算繪。

輸入類型	連線類型	圖片
虛擬輸入內容	無
列尾輸入	無
輸入值	輸入連線
輸入陳述式	下次聯絡記錄

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

虛擬輸入

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

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

以較複雜的例子來說，假設有一個區塊會將兩個數字相加。這可以從具有三個欄位 (數字、標籤、數字) 的單一虛擬輸入內容建構：

加法區塊，由含有三個欄位的虛擬輸入內容建構而成。

或三個虛擬輸入內容，每個輸入內容都只有一個欄位：

加法區塊由三個虛擬輸入內容建構而成，每個輸入內容都包含單一欄位。

列尾輸入

Blockly 會使用啟發式方法，決定要將所有輸入內容顯示在同一列，還是分別顯示在不同列。如要確保輸入內容會從新的一列開始，請使用列尾輸入內容做為前一個輸入內容。

與虛擬輸入內容類似，列尾輸入內容可以包含欄位，但沒有連線。舉例來說，以下是從列尾輸入內容建構的加法區塊，其中包含兩個欄位和一個欄位的虛擬輸入內容。列尾輸入內容會強制在新的資料列中算繪虛擬輸入內容。

加法區塊，由列尾輸入內容分成兩列。

輸入值

欄位可接受的內容有限。舉例來說，數字欄位只能接受數字。但如要將兩個變數相加，該怎麼辦？或是將程序呼叫的結果加到其他計算的結果中？如要解決這個問題，請使用輸入連線，而非欄位。使用者可以透過這個函式，將值方塊當做輸入值。

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

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

陳述式輸入

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

重複區塊，其中包含陳述式輸入內容，可巢狀重複陳述式。

陳述式輸入內容一律會顯示在自己的資料列中。您可以在下列 if-then-else 區塊中看到這個情況，該區塊的第一列有值輸入，接下來兩列則有陳述式輸入。

if-then-else 區塊，其中 then 和 else 陳述式分別有不同的陳述式輸入內容。

內嵌與外部輸入

輸入內容可以內嵌或外部方式呈現。這項屬性可控制值輸入的連接器是否要在方塊內 (內嵌) 或外側邊緣 (外部) 算繪，以及輸入內容是否要在相同或不同列中算繪。

同一個區塊會使用內嵌輸入內容和外部輸入內容各算繪一次。

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

開始運動吧！

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

圖示

除了輸入內容、連線和欄位，方塊還可有一或多個圖示。這些用途包括顯示警告、輸入區塊層級的註解，或是顯示變數 UI。舉例來說，以下是含有留言圖示和相關聯編輯器的區塊。

詳情請參閱「Icons」。

區塊和 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'
      ],
    },
  ]
}