เลย์เอาต์ตารางกริด

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

ในสูตรนี้ คุณจะสร้างตารางโดยใช้ API Grid

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

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

ส่วนผสม

• Grid: เลย์เอาต์คอมโพสิตที่วางรายการในตารางกริด 2 มิติ การกำหนดค่าเลย์เอาต์จะระบุไว้ในพารามิเตอร์แลมดา config ส่วนรายการเนื้อหา UI จะประกาศไว้ในพารามิเตอร์แลมดา content
• GridTrackSize.Auto: ระบุการปรับขนาดแทร็กอัตโนมัติในการกำหนดค่าตารางกริด ตามขนาดที่แท้จริงของเนื้อหา เช่น column(GridTrackSize.Auto) และ row(GridTrackSize.Auto)
• gap(): กำหนดค่าระยะห่างระหว่างแถวและคอลัมน์ภายใน GridConfigurationScope เช่น gap(row = 8.dp, column = 16.dp)

ขั้นตอน

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

1. นับแถวและคอลัมน์ของตารางกริดเพื่อกำหนดขนาดแทร็ก

ขั้นแรก ให้นับคอลัมน์และแถวเพื่อกำหนดขนาดแทร็ก ดังนี้

• คอลัมน์: จำนวนแอตทริบิวต์ที่คุณกำลังเปรียบเทียบ บวกกับคอลัมน์สำหรับชื่อรายการ
• แถว: จำนวนรายการที่คุณกำลังเปรียบเทียบ บวกกับแถวส่วนหัว 1 แถว

สำหรับสูตรนี้ที่เปรียบเทียบคอมโพเนนต์ 2 รายการ (FlexBox และ Grid) ใน 4 แอตทริบิวต์ คุณต้องใช้ 5 คอลัมน์และ 3 แถว

2. ใช้ตารางกริดเพื่อสร้างตารางเปรียบเทียบ

สร้างคอมโพสิต TableInGrid ที่ใช้ Grid เพื่อจัดวางรายการตาราง เรียกใช้ฟังก์ชัน column และ row ภายในแลมดา config เพื่อกำหนดขนาดแทร็ก และตั้งค่าระยะห่างระหว่างเซลล์ด้วย gap() เนื่องจากข้อความมีขนาดที่แท้จริง GridTrackSize.Auto จึงปรับขนาดคอลัมน์และแถวโดยอัตโนมัติให้พอดีกับเนื้อหา

วางส่วนหัวและข้อมูลของตารางไว้ภายในแลมดา content Grid จะจัดการการจัดวางและการจัดแนวเซลล์ทั้งหมดโดยอัตโนมัติ

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}
GridByExamples.kt

ผลลัพธ์

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

แหล่งข้อมูลเพิ่มเติม

• ตารางกริดใน Compose
• ตั้งค่าพร็อพเพอร์ตี้ของคอนเทนเนอร์