Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

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

**ตารางที่ 1** การเปรียบเทียบฟีเจอร์ของ `FlexBox` API และ `Grid` API
	การจัดวาง	การโหลดแบบ Lazy Loading	หุ้มแบบนุ่ม	การอัปเดตเลย์เอาต์แบบไดนามิก
`FlexBox`	1 วัน	ไม่	ใช่	ใช่
`Grid`	2 มิติ	ไม่	ไม่ได้	ใช่

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

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

ส่วนผสม

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

ขั้นตอน

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

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

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

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

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

2. ใช้ตารางเปรียบเทียบโดยใช้ Grid

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

วางส่วนหัวและข้อมูลของตารางไว้ใน Lambda 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 มิติที่ชัดเจนพร้อมการจัดแนวคอลัมน์และระยะห่างระหว่างเซลล์โดยอัตโนมัติแล้ว