製作第一個速度儀表

在儀錶盤打開 更多（…）→ 自訂儀表，選擇 新增儀表。新儀表已帶有一個基礎速度輸入。

1. 點擊編輯器頂部的名稱，進入 儀表設定，命名為“我的車速”。
2. 在 輸入綁定 旁點齒輪，打開 參數設定。檢查速度輸入：標識符為 speed，類型為 基礎資料，來源為 速度。缺少時用 新增參數 新建。
3. 點 完成 回傳並儲存設定，再回到編輯區。

腳本通過 $data.current.speed 讀取速度；這裡的欄位名來自輸入標識符。編輯器會按定義提供類型提示。本例不需要 OBD 綁定。

把編輯區原有內容整體替換為下面的完整程式碼，不要把它再包進另一個 main()。這個例子只有一個入口函式。

先保持程式碼不變。它會在每次需要繪製時讀取當前速度，把數值和單位上下排布；缺少讀數時顯示橫線。下一節會按執行順序解釋它。

function main() {
  const speed = $data.current.speed;
  return (
    <VStack spacing={8}>
      <Text fontSize={64} color={$env.foreground}>
        {speed?.value == null ? '—' : Math.round(speed.value)}
      </Text>
      <Text fontSize={16} color={$env.accent}>
        {speed?.unit ?? $env.speedUnit}
      </Text>
    </VStack>
  );
}

先看資料，再看畫面。假設這一次 speed 是 { value: 42.3, unit: "km/h" }：

1. const speed = $data.current.speed 取得本次讀數。這裡的 speed 是包含數值、單位的物件，不是數字本身。
2. speed?.value == null 檢查是否缺測。物件不存在或數值為空時，選擇 '—'；數值為 0 時不會走這個分支。
3. Math.round(speed.value) 將 42.3 四捨五入為 42，交給第一個 Text 顯示。捨入只影響這張儀表的顯示，不會修改原始讀數。
4. 第二個 Text 顯示 speed.unit。暫時沒有單位時，?? $env.speedUnit 使用當前顯示環境的速度單位。
5. VStack 將兩個文本上下排列，spacing={8} 控制它們之間的間距。

$env.foreground 和 $env.accent 提供當前主題的文字色和強調色。主題改變時，這些顏色會隨之更新。

不要用 speed?.value || '—' 判斷缺測：JavaScript 會把有效的零也當成假值，導致停車時錯誤地顯示橫線。

點擊編輯器底部的 預覽。你應當看到上面一個較大的速度數字，下面一行較小的單位。預覽中的數字是模擬值，不需要啓動車輛，也不一定等於此時手機測到的速度。

接著做三個小修改，每次改完再預覽：

檢查不同尺寸和明暗主題。某個尺寸下內容被裁掉時，先縮小字號或間距，再觀察，不要用大量 x/y 偏移去掩蓋佈局問題。

若出現報錯，先恢復到原樣，按日誌中的行號檢查。預覽時右上角是 日誌；關閉預覽回到編輯狀態後，右上角恢復為 儲存。預覽成功只說明這組模擬輸入可以顯示，實際資料還要在下一步核對。

關閉預覽，點擊 儲存，退出編輯器後在儀表庫中找到“我的車速”。再打開 更多（…）→ 編輯儀表板，點 + 添加它，最後點 完成。

此時這張卡片改為讀取實際速度。可以把它和內置車速儀表放在同一頁核對：它們使用同一個基礎速度欄位時，數值應當對應；因小數保留方式不同，顯示可能略有差別。

做到這裡，第一個儀表就完成了。下一篇把“取速度”換成“取自己的 OBD 參數”，佈局和顯示程式碼可以繼續沿用。