欄位剖析

所有欄位都必須有一個值,該值是欄位資料的可靠資料來源。這可以是任何類型 (字串、數字、陣列、日期等)。 欄位可以使用驗證工具限制值,或轉譯為機器可讀取的格式 (例如將日期格式正規化)。

文字

所有欄位都含有文字,這是代表欄位值的簡單易懂字串。這不一定表示兩者相同。例如,布林值欄位的文字可以是「On」或「Off」,但其值為「true」或「false」。

這段文字是區塊收合時顯示的內容 (用於無障礙功能,也可能是封鎖顯示畫面的一部分)。

可編輯的欄位與不可編輯欄位

一般而言,可編輯的欄位可讓使用者變更程式碼,不可編輯的欄位則會向使用者顯示區塊相關資訊。點選可編輯欄位後,畫面上可能會顯示複合式編輯器。

可編輯的欄位包括:

無法編輯的欄位包括:

序列化

可序列化欄位的值會以儲存格式 (JSON 或 XML) 編碼,所有可編輯欄位的值都是動態值,因此可以序列化。不可編輯的欄位值通常不是動態值,因此通常不會序列化。

序列化欄位包括:

非序列化欄位包括:

請注意,「標籤序列化」欄位無法編輯,但可以序列化。這表示只能以程式輔助方式編輯,不能透過向使用者顯示的 UI 進行編輯。編輯完成後,其值會編碼在產生的 JSON/XML。

產生程式碼

除了連線及中斷連線區塊以外,使用者只能透過欄位控制 Blockly 產生的程式碼。欄位提供的編輯器可讓使用者修改該欄位儲存的值。接著,區塊的產生器可能會存取欄位的值,以便在產生的程式碼中使用。

如要進一步瞭解如何在產生器中使用欄位值,請參閱產生欄位代碼

屏障螢幕

欄位的區塊顯示畫面是一組 SVG 元素,代表該欄位的值。這類物件會佔用區塊空間,且會隨著變更大小而強制區塊大小變更。根據欄位需求,欄位的區塊顯示顯示方式可能相當簡單或複雜。

以下是幾個不同區塊螢幕上的範例,以增加複雜度。

欄位類型 說明
標籤 此元素只包含文字元素。
角度 包含背景矩形、文字元素和度數符號。
烏龜 包含背景矩形、文字元素,以及用來建立烏龜圖形的許多 SVG 元素。

編輯器顯示畫面

使用者按一下可編輯的欄位時,欄位可能會顯示任意複雜的編輯器。

以下是不同編輯器的範例,以增加複雜度。

欄位類型 說明
核取方塊 點選時沒有編輯者。區塊螢幕更新。
數字輸入 文字編輯器疊加在模塊螢幕上。使用者可以輸入文字,編輯器可能會變更顏色來表示數值錯誤。
角度挑選器 角度挑選器同時提供輸入數字的文字編輯器,以及可拖曳的編輯器來選取角度。

其他顯示模式

收合模式:使用者收合區塊。區塊會使用個別欄位傳回的文字,以文字表示其值。

海龜模塊收合

無障礙模式:使用者可能會使用螢幕閱讀器或類似技術與 Blockly 互動。使用者可能會讀出欄位文字。