หน้านี้อธิบายวิธีออกแบบและสร้างคอมโพเนนต์ UI หลักของการ์ด ข้อความใน Google Chat
การ์ดรองรับเลย์เอาต์ที่กำหนด องค์ประกอบ UI แบบอินเทอร์แอกทีฟ เช่น ปุ่ม สื่อสมบูรณ์ เช่น รูปภาพ คุณสามารถใช้การ์ดเพื่อนำเสนอข้อมูล รวบรวมข้อมูล หรือแจ้งขั้นตอนถัดไปแก่ผู้ใช้ ข้อความการ์ดและ กล่องโต้ตอบ
ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด JSON สำหรับแอป Chat ดังนี้
เปิดเครื่องมือสร้างการ์ดโดยทั่วไปการ์ดและกล่องโต้ตอบจะมีคอมโพเนนต์ต่อไปนี้
CardHeaderที่มีชื่อของการ์ด- วิดเจ็ต
CardSectionอย่างน้อย 1 รายการซึ่งสร้างเป็นส่วนหลักของการ์ด - วิดเจ็ต
CardFixedFooterเฉพาะสำหรับกล่องโต้ตอบเท่านั้น
ข้อกำหนดเบื้องต้น
เพิ่มส่วนหัว
วิดเจ็ต 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