ออกแบบองค์ประกอบของการ์ดหรือกล่องโต้ตอบ

หน้านี้อธิบายวิธีออกแบบและสร้างคอมโพเนนต์ UI หลักของการ์ด ข้อความใน Google Chat

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

ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด JSON สำหรับแอป Chat ดังนี้

เปิดเครื่องมือสร้างการ์ด

โดยทั่วไปการ์ดและกล่องโต้ตอบจะมีคอมโพเนนต์ต่อไปนี้

  • CardHeader ที่มีชื่อของการ์ด
  • วิดเจ็ต CardSection อย่างน้อย 1 รายการซึ่งสร้างเป็นส่วนหลักของการ์ด
  • วิดเจ็ต CardFixedFooter เฉพาะสำหรับกล่องโต้ตอบเท่านั้น

ข้อกำหนดเบื้องต้น

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟ ทำตามการเริ่มต้นใช้งานอย่างรวดเร็วต่อไปนี้ เกี่ยวกับสถาปัตยกรรมแอปที่คุณต้องการใช้

เพิ่มส่วนหัว

วิดเจ็ต CardHeader แสดงส่วนหัวของการ์ด ส่วนหัวอาจมี ชื่อ คำบรรยาย และรูปโปรไฟล์สำหรับการ์ด

คุณสามารถรวม CardHeader สำหรับ ข้อความในการ์ด และ กล่องโต้ตอบ

ต่อไปนี้คือตัวอย่างของ CardHeader

กำหนดส่วนของการ์ด

วิดเจ็ต CardSection คือ คอนเทนเนอร์ระดับสูงภายในการ์ด คุณใช้บัตร เพื่อจัดกลุ่มวิดเจ็ตภายในการ์ด สำหรับการ์ดแต่ละส่วน คุณสามารถใส่ ส่วนหัวและวิดเจ็ตอย่างน้อย 1 รายการ

คุณสามารถรวม CardSection สำหรับ ข้อความในการ์ด และ กล่องโต้ตอบ

ต่อไปนี้คือตัวอย่างของ CardSection ที่มี textParagraph 2 รายการ วิดเจ็ต:

CardFixedFooter วิดเจ็ตแสดงส่วนท้ายของข้อความกล่องโต้ตอบที่ส่งจาก แอปใน Chat ส่วนท้ายจะมีปุ่มหลักและปุ่มรองได้

วิดเจ็ต CardFixedFooter ใช้ได้กับ กล่องโต้ตอบ

ต่อไปนี้คือตัวอย่างของวิดเจ็ต CardFixedFooter ที่มี 2 ปุ่ม

แก้ปัญหา

เมื่อแอป Google Chat หรือ card จะแสดงผลข้อผิดพลาด อินเทอร์เฟซ Chat แสดงข้อความว่า "เกิดข้อผิดพลาด" หรือ "ไม่สามารถดำเนินการตามคำขอของคุณ" บางครั้ง UI ของ Chat ไม่แสดงข้อความแสดงข้อผิดพลาดใดๆ แต่แอป Chat หรือ ทำให้เกิดผลลัพธ์ที่ไม่คาดคิด เช่น ข้อความในการ์ดอาจ ปรากฏขึ้น

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