การวางซ้อนองค์ประกอบ UI ด้วยตารางกริด

API Grid ของ Jetpack Compose ออกแบบมาสำหรับเลย์เอาต์หน้าจอแบบ 2 มิติเชิงโครงสร้าง Grid ช่วยให้ คุณกำหนดโครงสร้างเลย์เอาต์แบบคงที่ หรือแบบปรับเปลี่ยนตามอุปกรณ์ได้โดยใช้แทร็ก (แถวและคอลัมน์) ช่องว่าง และ พื้นที่กริด ซึ่งแตกต่างจากกริดแบบ Lazy ที่ปรับให้เหมาะกับชุดข้อมูลขนาดใหญ่ คุณวางรายการลงในโครงสร้างนี้โดยใช้ Modifier.gridItem ซึ่งช่วยให้คุณควบคุมการวางตำแหน่งและการขยายภายในคอนเทนเนอร์กริดได้อย่างชัดเจน

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

แนวทางปฏิบัติแนะนำ

• ลำดับการประกาศ: Grid เป็นไปตามลำดับ zIndex มาตรฐานตามลำดับการประกาศภายในบล็อก Grid ระบบจะแสดงรายการที่ประกาศไว้ในบล็อกเนื้อหา Grid ภายหลังไว้เหนือรายการที่ประกาศไว้ก่อนหน้า
• การควบคุม z-index อย่างชัดเจน: ใช้ Modifier.zIndex หากคุณต้องการควบคุมหรือลบล้างลำดับการวาดเริ่มต้นขององค์ประกอบที่ทับซ้อนกันอย่างชัดเจน
• พื้นที่ที่มีชื่อเทียบกับการซ้อนทับรายการ: ใช้ Grid และพื้นที่ที่มีชื่อเพื่อกำหนดโครงสร้างเลย์เอาต์ แต่เก็บตรรกะการซ้อนทับที่ซับซ้อนไว้ภายใน gridItem ที่เฉพาะเจาะจงหากการซ้อนทับเหล่านั้นเชื่อมโยงกับเซลล์กริดนั้นๆ อย่างมีเหตุผล
• การขยายที่ตั้งใจไว้สำหรับการซ้อนทับ: เมื่อซ้อนทับ ให้ตรวจสอบว่าพารามิเตอร์ rowSpan และ columnSpan เป็นไปตามที่ตั้งใจไว้สำหรับองค์ประกอบที่ทับซ้อนกันเพื่อควบคุมปริมาณเนื้อหาพื้นฐานที่จะถูกบดบัง

ส่วนผสม

• Grid: คอนเทนเนอร์เลย์เอาต์แบบ 2 มิติเชิงโครงสร้าง
• GridConfigurationScope.area: ฟังก์ชันกำหนดขอบเขตที่ใช้กำหนดภูมิภาคที่มีชื่อและพื้นที่ซ้อนทับในแทร็กกริด
• Modifier.gridItem: ตัวปรับแต่งที่ใช้เพื่อวางและขยายคอมโพสได้ในแทร็กกริดหรือในพื้นที่กริดที่มีชื่อ
• Modifier.zIndex: ตัวปรับแต่งที่ใช้เพื่อควบคุมลำดับการวาดและการยกระดับเลเยอร์อย่างชัดเจน

ขั้นตอน

กำหนดค่าเลย์เอาต์กริดและพื้นที่ที่มีชื่อ วางเนื้อหาเลเยอร์พื้นฐานภายในพิกัดกริดเป้าหมาย และวางองค์ประกอบการซ้อนทับในเซลล์กริดที่แชร์หรือพื้นที่ที่ทับซ้อนกัน

1. กำหนดค่ากริด

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

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. วางเนื้อหาพื้นฐานและประกาศการซ้อนทับ

วางคอมโพสได้พื้นฐานในเซลล์กริดโดยใช้ Modifier.gridItem Grid เป็นไปตามลำดับ zIndex มาตรฐานตามลำดับการคอมโพส ดังนั้นระบบจะวาดรายการที่ประกาศไว้ในบล็อก Grid ภายหลังไว้เหนือรายการก่อนหน้า เมื่อวางการซ้อนทับในเซลล์เดียวกันหรือพื้นที่ที่ทับซ้อนกัน ให้ประกาศคอมโพสได้การซ้อนทับหลังองค์ประกอบพื้นฐาน หรืออ้างอิงพื้นที่ที่มีชื่อ คุณสามารถใช้ Modifier.zIndex หากต้องการควบคุมหรือลบล้างลำดับการวาดเริ่มต้นนี้อย่างชัดเจน

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

ผลลัพธ์

องค์ประกอบ UI ของคุณจะซ้อนทับกันอย่างคาดการณ์ได้ภายในโครงสร้างกริดแบบ 2 มิติ การใช้ลำดับการประกาศมาตรฐานจะช่วยให้คุณหลีกเลี่ยงคอนเทนเนอร์ที่ซ้อนกันอย่างซับซ้อน ขณะเดียวกันก็รักษาโค้ดเลย์เอาต์ให้สะอาดและปรับเปลี่ยนตามอุปกรณ์ได้