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