แก้ไขเพิ่มเติม: การจัดวาง ภาพเคลื่อนไหวและแชร์

ขั้นแรกให้ฝึกเพิ่มไอคอนข้างความเร็ว ตัวอย่างที่สมบูรณ์ด้านล่างแสดงเฉพาะตัวเลขคงที่ 78 เพื่อให้มองเห็นการเปลี่ยนแปลงเค้าโครงได้ง่าย มันยังไม่ถึงความเร็วที่แท้จริง

เลเยอร์ด้านนอก HStack จัดเรียงไอคอนและเนื้อหาทางด้านขวาซ้ายและขวา ทางด้านขวา VStack จัดเรียงตัวเลขและหน่วยขึ้นและลง สิ่งที่คุณเห็นคือสองระดับ: ทั้งบรรทัดจัดเรียงไปทางซ้ายและขวา และข้อความจัดเรียงขึ้นและลง

ลองแก้ไขสามครั้งตามลำดับ: เปลี่ยนเลเยอร์ด้านนอก spacing={12} เป็น 24 ไอคอนและข้อความจะแยกจากกันมากขึ้น เปลี่ยนชั้นใน spacing={4} เป็น 12 ตัวเลขและหน่วยจะแยกออกจากกัน เปลี่ยนเลเยอร์ด้านใน alignment="leading" เป็น "trailing" และข้อความสองบรรทัดจะจัดชิดขวา

สังเกตแกนการจัดแนว: 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 กำหนดจำนวนมุมที่จะกวาดจากจุดเริ่มต้น property: 'sweepAngle' ใน animations หมายถึงการทำให้การเปลี่ยนแปลงของแอตทริบิวต์นี้เคลื่อนไหว: เมื่อเปลี่ยนจาก 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 เลือกพารามิเตอร์ยานพาหนะที่สอดคล้องกันของอุปกรณ์ผู้รับ

เมื่อใช้ RPM หรือเกจวัดอุณหภูมิน้ำหล่อเย็นร่วมกัน ให้ระบุว่าจำเป็นต้องอ่านค่ายานพาหนะใดและผูกไว้ที่ไหน ตราบใดที่ตัวระบุอินพุตยังคงอยู่ การเชื่อมโยงอุปกรณ์อีกครั้งไม่จำเป็นต้องแก้ไขโค้ด ตรวจสอบขนาดและธีมต่างๆ ก่อนแชร์ และตรวจสอบข้อมูลส่วนบุคคลในโค้ด เนื้อหา และข้อความเริ่มต้น

สิ่งที่กำลังแก้ไขบนคอมพิวเตอร์คือร่างเครื่องดนตรีที่เปิดอยู่บนโทรศัพท์ในปัจจุบัน ขั้นแรกให้ป้อนตัวแก้ไขของเครื่องมือนี้บนโทรศัพท์มือถือ จากนั้นเชื่อมต่อตามลำดับต่อไปนี้:

1. เชื่อมต่อ iPhone และคอมพิวเตอร์เข้ากับเครือข่าย Wi-Fi เดียวกัน
2. เปิด แก้ไขระยะไกล ในโปรแกรมแก้ไขมือถือ และรอให้ที่อยู่ปรากฏขึ้น
3. ป้อนที่อยู่แบบเต็มที่แสดงบนโทรศัพท์ของคุณลงในเบราว์เซอร์คอมพิวเตอร์ของคุณ อย่าใช้ที่อยู่เซสชันเก่า และอย่าเข้าใจผิดว่า localhost ของคอมพิวเตอร์เป็นที่อยู่ของโทรศัพท์ของคุณ
4. เปิดเซสชันการแก้ไขบนมือถือของคุณไว้ แก้ไขสิ่งที่ระบุได้ง่ายบนคอมพิวเตอร์ของคุณ เช่น ขนาดตัวอักษร จากนั้นดูตัวอย่างการเปลี่ยนแปลงบนโทรศัพท์มือถือของคุณ
5. หลังจากแก้ไขเสร็จแล้วให้กลับไปที่โทรศัพท์มือถือเพื่อบันทึกเครื่องมือและยืนยันบนแผงหน้าปัดจริง

หากไม่สามารถเปิดที่อยู่ได้ ก่อนอื่นให้ยืนยันว่าอุปกรณ์ทั้งสองอยู่ในเครือข่ายเดียวกันจริง ๆ และเซสชันมือถือยังคงทำงานอยู่ การปิดการแก้ไขระยะไกล การออกจากโปรแกรมแก้ไข หรือการสลับแอปเป็นพื้นหลังจะหยุดเซสชัน หลังจากเปิดใหม่อีกครั้ง ที่อยู่ปัจจุบันที่แสดงบนโทรศัพท์จะถูกนำมาใช้

การเชื่อมต่อนี้ใช้ HTTP ภายในเครื่องที่ไม่ได้เข้ารหัส โดยไม่มีรหัสผ่านเข้าสู่ระบบแยกต่างหาก อุปกรณ์ที่เข้าถึงที่อยู่ LAN นี้อาจสามารถอ่านหรือแก้ไขแบบร่างปัจจุบันและทรัพยากรในนั้น หรือดูบันทึกการแก้ไขได้ ดังนั้นจึงเปิดใช้งานบนเครือข่ายที่เชื่อถือได้เท่านั้น หลังจากการแก้ไขเสร็จสิ้น การแก้ไขระยะไกลจะถูกปิดและบันทึกไว้ในโทรศัพท์

ขั้นแรกให้พิจารณาว่าเป็นปัญหารหัสหรือปัญหาข้อมูล

เมื่อการแสดงตัวอย่างรายงานข้อผิดพลาดโดยตรง ขั้นแรกให้ดูที่หมายเลขบรรทัดในบันทึก ตรวจสอบวงเล็บ ชื่อคุณสมบัติ และประเภทข้อมูล ตัวอย่างเช่น การเรียก toFixed บนสตริง และการไม่พบสัญญาณเป็นปัญหาที่แตกต่างกันสองประการ

เมื่อการแสดงตัวอย่างเป็นเรื่องปกติแต่เครื่องมือจริงไม่มีค่า ให้ตรวจสอบแหล่งข้อมูลก่อน ตรวจสอบตำแหน่งสำหรับความเร็วพื้นฐาน ตรวจสอบรายการพารามิเตอร์อุปกรณ์สำหรับ OBD จากนั้นตรวจสอบข้อมูลและนิพจน์การอ่านที่เลือกโดยเครื่องมือ อย่าแทนที่ค่าที่อ่านไม่ได้ด้วยตัวเลขคงที่ และคิดว่าการเชื่อมต่อได้รับการแก้ไขแล้ว

เนื้อหาถูกรวมเข้าด้วยกันหรือครอบตัด

ขั้นแรกย่อให้เป็น "คอนเทนเนอร์หนึ่งรายการ + ข้อความหนึ่งบรรทัด" ยืนยันพื้นที่ว่าง จากนั้นใส่ไอคอน ข้อความบรรทัดที่สอง และกราฟิกกลับทีละรายการ ตรวจสอบความกว้าง ความสูง ขนาดตัวอักษร และระยะห่างคงที่ ใช้ Stack เพื่อจัดเรียงเนื้อหา ใช้ transform เมื่อต้องการการแปล การปรับขนาด หรือการหมุนโดยรวม

แอนิเมชั่นไม่มีเอฟเฟกต์

ขั้นแรกให้ยืนยันว่าแอตทริบิวต์เป้าหมายมีการเปลี่ยนแปลงจริงๆ จากนั้นยืนยันว่า animations.property ชี้ไปที่คุณลักษณะนี้ แก้ไข sweepAngle={180} ไม่หมุนด้วยตัวเองเพียงเพราะมีการประกาศภาพเคลื่อนไหว ขั้นแรกให้ตรวจสอบกับข้อมูลที่เปลี่ยนแปลงในหน้าตัวอย่าง จากนั้นอัปเดตกับข้อมูลจริง

ตรวจสอบให้ครบถ้วนก่อนบันทึก

ตรวจสอบรูปลักษณ์ในขนาดต่างๆ และธีมสว่างและมืด ตรวจสอบศูนย์ที่ถูกต้อง การวัดที่ขาดหายไป และการอ่านข้อความ ปิดการแสดงตัวอย่างและบันทึกก่อนเพิ่มเกจลงในเพจเพื่อตรวจสอบข้อมูลจริง เมื่อลักษณะที่ปรากฏ โค้ด และการอ่านจริงตรงกันเท่านั้นจึงจะสามารถดำเนินการเครื่องมือให้เสร็จสิ้นได้