จัดรูปแบบโครงสร้างของการ์ดหรือกล่องโต้ตอบ

หน้านี้อธิบายวิธีจัดรูปแบบและจัดโครงสร้างวิดเจ็ตในการ์ดหรือข้อความโต้ตอบ

ออกแบบและแสดงตัวอย่างการ์ดด้วยเครื่องมือสร้างการ์ด

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

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

  • บัญชี Google Workspace ที่มีสิทธิ์เข้าถึง Google Chat
  • แอป Chat ที่เผยแพร่แล้ว หากต้องการสร้าง แอป Chat ให้ทำตาม quickstartนี้

    • แสดงการ์ดและกล่องโต้ตอบในคอลัมน์

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

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

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

    กำหนดความกว้างของคอลัมน์

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

    • บนเว็บ คอลัมน์ที่ 2 จะตัดข้อความหากมีความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 480 พิกเซล
    • ในอุปกรณ์ iOS คอลัมน์ที่ 2 จะตัดคอลัมน์ที่ 2 หากความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 300 พอยต์
    • ในอุปกรณ์ Android คอลัมน์ที่ 2 จะตัดคอลัมน์ที่ 2 หากความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 320 dp

    ตัวอย่างต่อไปนี้แสดงการ์ดที่มีวิดเจ็ต columns ที่มีข้อความ 2 คอลัมน์ซึ่งมี 4 รายการในคอลัมน์ แต่ละรายการในคอลัมน์จะใช้ horizontalSizeStyle เพื่อกำหนดพื้นที่ว่างที่จะใส่ข้อความในแต่ละคอลัมน์ ดังนี้

    • ย่อหน้าข้อความแรกใช้ FILL_MINIMUM_SPACE เพื่อเติมความกว้างไม่เกิน 30% ของการ์ด
    • ย่อหน้าที่ 2 ใช้ FILL_AVAILABLE_SPACE เพื่อเติมพื้นที่ว่างในความกว้างของการ์ด ในตัวอย่างนี้ เป็น 70% ของความกว้างการ์ด
    • ย่อหน้าที่ 3 ไม่ได้กำหนด horizontalSizeStyle ดังนั้นค่าเริ่มต้นจะเติมพื้นที่ว่างของการ์ด
    • ย่อหน้าที่ 4 ใช้ FILL_MINIMUM_SPACE เพื่อเติมความกว้างไม่เกิน 30% ของการ์ด

    กำหนดการจัดแนวคอลัมน์ในแนวนอน

    คุณจัดวิดเจ็ตในแนวนอนไปซ้าย ขวา หรือกึ่งกลางคอลัมน์ได้โดยกำหนดช่อง horizontalAligment หากไม่ได้ระบุการกำหนดค่า horizontalAlignment วิดเจ็ตจะจัดแนวชิดซ้ายในคอลัมน์

    ตัวอย่างต่อไปนี้ช่วยจัดข้อความในแนวนอนภายในคอลัมน์ทางด้านซ้าย

    ตัวอย่างต่อไปนี้ช่วยจัดข้อความแนวนอนภายในคอลัมน์ที่อยู่ตรงกลาง

    ตัวอย่างต่อไปนี้ช่วยจัดข้อความในแนวนอนภายในคอลัมน์ทางด้านขวา

    กำหนดการจัดแนวคอลัมน์แนวตั้ง

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

    ตัวอย่างต่อไปนี้ช่วยจัดข้อความแนวตั้งภายในคอลัมน์ให้อยู่ด้านบน

    ตัวอย่างต่อไปนี้ช่วยจัดข้อความแนวตั้งภายในคอลัมน์ที่กึ่งกลาง

    ตัวอย่างต่อไปนี้ช่วยจัดข้อความแนวตั้งภายในคอลัมน์ที่ด้านล่าง

    เพิ่มเส้นแบ่งแนวนอนระหว่างวิดเจ็ต

    วิดเจ็ต divider แสดงเส้นแนวนอนที่กินพื้นที่ความกว้างของการ์ด ระหว่างวิดเจ็ตที่เรียงซ้อนกันในแนวตั้ง เส้นคือเส้นแบ่งที่ช่วยให้ผู้ใช้แยกความแตกต่างระหว่างวิดเจ็ตหนึ่งกับอีกวิดเจ็ตหนึ่ง ทำให้สแกนและทำความเข้าใจการ์ดได้ง่ายขึ้น

    ต่อไปนี้เป็นการ์ดที่ประกอบด้วยวิดเจ็ต divider อยู่ระหว่างวิดเจ็ตประเภทอื่นๆ

    แสดงตารางกริดที่มีคอลเล็กชันรายการ

    วิดเจ็ต grid จะแสดงตารางกริดที่มีคอลเล็กชันรายการ ตารางกริดรองรับคอลัมน์และรายการกี่รายการก็ได้ จํานวนแถวกําหนดโดยรายการหารด้วยคอลัมน์ ตารางกริดที่มี 10 รายการและ 2 คอลัมน์จะมี 5 แถว ตารางกริดที่มี 11 รายการและ 2 คอลัมน์ จะมี 6 แถว

    วิดเจ็ตรองรับคำแนะนำซึ่งช่วยให้ผู้ใช้ป้อนข้อมูลที่เป็นแบบเดียวกันและการทำงานที่เปลี่ยนแปลง ซึ่งได้แก่ Actions ที่จะทำงานเมื่อมีการเปลี่ยนแปลงเกิดขึ้นในช่องป้อนข้อความ เช่น ผู้ใช้เพิ่มหรือลบข้อความ

    ตัวอย่างต่อไปนี้เป็นตารางกริดแบบ 2 คอลัมน์ที่มีรายการเดียว

    กำหนดตำแหน่งที่ข้อความจะปรากฏด้วยรูปภาพในตารางกริด

    ช่อง gridItemLayout ช่วยให้คุณกำหนดภายใน gridItem แต่ละรายการว่าข้อความจะปรากฏด้านบนหรือด้านล่างรายการในตารางกริด หากไม่ได้กำหนด gridItemLayout ค่าเริ่มต้นของข้อความจะปรากฏใต้รายการในตาราง

    ตัวอย่างต่อไปนี้เป็นตารางกริด 3 คอลัมน์ที่มีข้อความและรูปภาพ ในแต่ละตารางกริด ตารางกริดแรกจะกำหนดข้อความที่จะแสดงเหนือรูปภาพ ตารางกริดที่ 2 จะกำหนดข้อความที่จะแสดงด้านล่างรูปภาพ และตารางกริดที่ 3 ไม่ได้กำหนดตำแหน่งของข้อความ

    เพิ่มเส้นขอบในองค์ประกอบ UI

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

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

    ตัวอย่างต่อไปนี้เป็นตารางที่มี 3 คอลัมน์ซึ่งมีรูปภาพในแต่ละตารางกริด รวมถึงรูปแบบเส้นขอบและประเภทที่กำหนดไว้แยกกัน รูปภาพแรกมีเส้นขอบกำหนดเป็น STROKE รูปภาพที่ 2 มีเส้นขอบกำหนดเป็น NO_BORDER รูปภาพที่ 3 ไม่ได้กำหนดเส้นขอบ

    แก้ปัญหา

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

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