繼續編輯：版面、動畫與分享

先練習把速度旁邊加一個圖標。下面的完整例子只顯示固定數字 78，目的是讓佈局變化容易觀察；它還沒有接入實際速度。

外層 HStack 把圖標與右側內容左右排列。右側 VStack 再把數字和單位上下排列。所以你看到的是兩個層次：整行左右排，文字內部上下排。

依次試三個修改：把外層 spacing={12} 改為 24，圖標與文字會更遠；把內層 spacing={4} 改為 12，數字與單位會更遠；把內層 alignment="leading" 改為 "trailing"，兩行文字會按右側對齊。

注意兩種 Stack 的對齊方向：HStack 的 alignment 控制上下對齊，VStack 控制左右對齊。不要把 x/y 當作間距：它們只是視覺偏移，不會讓旁邊的內容重新排列。

佈局確定後，再把固定的 78 換成第一篇速度示例中的讀取表達式，並在資料設定選擇速度。這樣每次練習只改變一件事。

function main() {
  return (
    <HStack spacing={12} alignment="center">
      <Symbol name="speedometer" color={$env.accent} />
      <VStack alignment="leading" spacing={4}>
        <Text fontSize={40}>78</Text>
        <Text fontSize={14}>{$env.speedUnit}</Text>
      </VStack>
    </HStack>
  );
}

這個例子把速度換算成一個圓弧角度，再為角度變化加過渡。先在儀表設定里選擇基礎速度，然後粘貼程式碼。

speed / 200 得到相對於 200 的比例，限制在 0…1 之後乘以 360，就是當前要畫出的角度。例如速度為 50 時角度是 90°，速度為 100 時是 180°。這裡的 200 是示例量程，使用的是當前速度單位下的數值，可以根據自己的儀表修改。

startAngle={-90} 把起點放在頂部；sweepAngle 決定從起點掃過多少角度。animations 中的 property: 'sweepAngle' 表示對這個屬性的變化做動畫：從 90° 變到 180° 時，用 0.25 秒完成過渡。

試著把 duration 改為 1，觀察圓弧更慢地跟隨新目標。動畫不會提高真實資料的採樣頻率，也不會把圓弧自動變成一段計時動畫；必須有新的目標角度才會發生變化。

下面的程式碼在沒有速度時顯示橫線，不把缺測偽裝成零。圓弧只對有效的數字讀數繪製。

function main() {
  const speed = $data.current.speed?.value;
  if (speed == null) {
    return (
      <Text fontSize={32} color={$env.foreground}>
        —
      </Text>
    );
  }
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={Math.max(0, Math.min(1, speed / 200)) * 360}
      animations={[
        { property: 'sweepAngle', duration: 0.25, curve: 'easeOut' },
      ]}
    />
  );
}

先關閉預覽並儲存儀表，再從已儲存儀表的菜單導出。.instrument 包含程式碼、圖片資源與輸入定義，可通過系統分享面板發送或存入“檔案”。定義中的預設值會導出。本機修改的輸入值不會導出。OBD 設備綁定不會導出。

接收者用 CapDrive 打開它，導入後仍需通過 編輯儀表板 添加到頁面。在 輸入綁定 中設定自己的數值、文字或選項；OBD 輸入則選擇接收者設備的相應車輛參數。

分享轉速或水溫儀表時，應說明需要哪個車輛讀數、在哪裡綁定。只要保留輸入標識符，重新綁定設備就不必修改程式碼。分享前檢查不同尺寸與主題，並核對程式碼、資源和預設文字中是否含有個人信息。

在電腦上編輯的是手機中當前打開的儀表草稿。先在手機端進入這塊儀表的編輯器，再按下面的順序連線：

1. 讓 iPhone 與電腦連線同一個 Wi-Fi 網絡。
2. 在手機編輯器打開 遠端編輯模式，等待出現地址。
3. 在電腦瀏覽器輸入手機顯示的完整地址。不要使用舊工作階段地址，也不要把電腦的 localhost 當成手機地址。
4. 保持手機編輯工作階段打開，在電腦修改一處容易識別的內容，例如字號，然後到手機預覽檢查變化。
5. 編輯完成後回到手機儲存儀表，並在實際儀錶盤確認。

如果位址打不開，先確認兩台裝置確實在同一網路、手機會話仍在運作。關閉遠端編輯、離開編輯器或將 App 切到後台，會停止會話；重新開啟後使用手機目前顯示的位址。

此連線使用未加密的本機 HTTP，沒有獨立登入密碼。能存取該區域網路位址的裝置可能會讀取或修改目前草稿及其資源，也可能會查看編輯日誌。因此只在可信任網路開啟，編輯完成後關閉遠端編輯並在手機儲存。

先判斷是程式碼問題還是資料問題

預覽直接報錯時，先看日誌中的行號。檢查括號、屬性名和資料類型；例如對字串呼叫 toFixed 與定位沒有信號是兩種不同問題。

預覽正常、實際儀表沒有值時，先檢查資料來源。基礎速度看定位，OBD 看設備參數列表，再檢查儀表選擇的資料和讀取表達式。不要用一個固定數字替換缺測後就認為連線修好了。

內容擠在一起或被裁掉

先縮小到“一個容器 + 一行文字”，確認可用空間，再逐個放回圖標、第二行文字和圖形。檢查固定寬高、字號和間距。用 Stack 排列內容；需要整體平移、縮放或旋轉時再使用 transform。

動畫沒有效果

先確認目標屬性本身真的在變化，再確認 animations.property 指向了這個屬性。固定的 sweepAngle={180} 不會因為聲明瞭動畫就自行轉圈。先用預覽中的變化資料驗證，再對照實際資料更新。

儲存前做一次完整核對

在不同尺寸和明暗主題下檢查外觀；驗證有效零值、缺測和文本讀數；關閉預覽儲存後，再把儀表添加到頁面檢查實際資料。外觀、程式碼與真實讀數都對應上，才算完成這塊儀表。