ตั้งค่าพร็อพเพอร์ตี้ของคอนเทนเนอร์

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

กำหนดตารางกริด

ตารางกริดประกอบด้วยคอลัมน์และแถว คอมโพสได้ Grid มีพารามิเตอร์configที่ยอมรับแลมดาเพื่อกำหนดคอลัมน์และแถว ภายใน GridConfigurationScope ตัวอย่างต่อไปนี้กำหนดตารางกริดที่มี 3 แถวและ 2 คอลัมน์ โดยแต่ละแถวและคอลัมน์มีขนาดคงที่ที่ระบุใน Dp

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}

วางรายการในตารางกริด

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

ในตัวอย่างต่อไปนี้ ตารางกริดมีเซลล์ตารางกริด 6 เซลล์และวางการ์ดลงในแต่ละเซลล์ (รูปที่ 1) เซลล์ตารางกริดแต่ละเซลล์มีขนาด 160dp x 90dp ทำให้ตารางกริดมีขนาดรวม 320dp x 270dp

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}

วางไพ่ 6 ใบในตารางกริดที่มี 3 แถวและ 2 คอลัมน์
รูปที่ 1. การ์ด 6 ใบวางอยู่ในตารางกริดที่มี 3 แถวและ 2 คอลัมน์

หากต้องการเปลี่ยนลักษณะการทำงานเริ่มต้นนี้เป็นการเติมตามคอลัมน์, ให้ตั้งค่าพร็อพเพอร์ตี้ flow เป็น GridFlow.Column

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}

ฟังก์ชันโฟลว์จะเปลี่ยนทิศทางเพื่อวางรายการ
รูปที่ 2 GridFlow.Row (ซ้าย) และ GridFlow.Column (ขวา)

จัดการการปรับขนาดแทร็ก

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

  • คงที่ (Dp): จัดสรรขนาดที่เฉพาะเจาะจง (เช่น column(180.dp))
  • เปอร์เซ็นต์ (Float): จัดสรรเปอร์เซ็นต์ของพื้นที่ว่างทั้งหมดตั้งแต่ 0.0f ถึง 1.0f (เช่น row(0.5f) สำหรับ 50%)
  • ยืดหยุ่น (Fr): กระจายพื้นที่ที่เหลือตามสัดส่วนหลังจากคำนวณแทร็กแบบคงที่ และแบบเปอร์เซ็นต์แล้ว ตัวอย่างเช่น หากตั้งค่าแถว 2 แถวเป็น 1.fr และ 3.fr แถวหลังจะได้รับความสูงที่เหลือ 75%
  • แบบภายใน: ปรับขนาดแทร็กตามเนื้อหาภายใน ดูข้อมูลเพิ่มเติมได้ที่ กำหนดขนาดแทร็กตารางกริดแบบภายใน

ตัวอย่างต่อไปนี้ใช้ตัวเลือกการปรับขนาดแทร็กต่างๆ เพื่อกำหนดความสูงของแถว

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}

ความสูงของแถวที่กำหนดโดยใช้ตัวเลือกการกำหนดขนาดแทร็กหลัก 4 รายการ
รูปที่ 3 ความสูงของแถวที่กำหนดโดยใช้ตัวเลือกการปรับขนาดแทร็กหลัก 4 ตัวเลือกใน Grid

กำหนดขนาดขั้นต่ำสำหรับแทร็กตารางกริดแบบยืดหยุ่น

เมื่อคอนเทนเนอร์ตารางกริดไม่มีพื้นที่เหลือ แทร็กแบบยืดหยุ่นมาตรฐานจะหดลงเหลือ 0.dp ได้ หากต้องการป้องกันไม่ให้เกิดเหตุการณ์นี้และมั่นใจว่าเนื้อหาจะไม่ถูกบีบอัด ให้ใช้ GridTrackSize.MinMax เพื่อบังคับใช้ขนาดขั้นต่ำที่ชัดเจนในขณะที่ยังคงให้แทร็กมีความยืดหยุ่น

ตัวอย่างต่อไปนี้จัดสรรพื้นที่อย่างน้อย 100.dp ให้กับแถวแรก

Grid(
    config = {
        column(1f)
        // The first row has a minimum height of 100.dp and can expand to 
        // the half of the remaining space.
        row(GridTrackSize.MinMax(100.dp, 1.fr))
        // The second row takes the half of the remaining space.
        row(1.fr)
        // The third row has a fixed height of 200.dp.
        row(200.dp)
    },
    modifier = Modifier.size(360.dp) // Total grid height is 360.dp
) {
    PastelRedCard("MinMax(100.dp, 1.fr)")
        PastelGreenCard("Flex(1.fr)")
    PastelBlueCard("Fixed(200.dp)")
}

ความสูงของแถวที่กำหนดโดยใช้ตัวเลือกการกำหนดขนาดแทร็กหลัก 4 รายการ
รูปที่ 4 แถวแรกมีความสูงอย่างน้อย 100.dp

กำหนดขนาดแทร็กตารางกริดขั้นต่ำเพื่อวางรายการแบบ Lazy

แทร็กแบบยืดหยุ่นมาตรฐานจะค้นหาขนาดภายในขององค์ประกอบย่อยโดยอัตโนมัติเพื่อกำหนดขนาดพื้นฐาน อย่างไรก็ตาม Jetpack Compose ไม่อนุญาตให้ค้นหาขนาดภายในของ SubcomposeLayout ซึ่งเป็นส่วนประกอบพื้นฐาน เช่น LazyColumn และ LazyRow

การวางรายการแบบ Lazy ไว้ในแทร็กแบบยืดหยุ่นมาตรฐานจะทำให้เกิด ข้อขัดข้อง IllegalStateException หากต้องการวางรายการแบบ Lazy ไว้ในแทร็กตารางกริดแบบยืดหยุ่นอย่างปลอดภัย ให้ใช้ MinMax ที่มีขนาดขั้นต่ำที่ชัดเจน (เช่น 0.dp) เพื่อข้ามขั้นตอนการวัดแบบภายใน

Grid(
    config = {
        column(1f)
        // The first row's height is determined by the height of the Text composable.
        row(GridTrackSize.Auto)
        // The second row occupies the remaining space, allowing the LazyColumn to scroll.
        row(GridTrackSize.MinMax(0.dp, 1.fr))

        gap(8.dp)
    },
    modifier = Modifier.size(width = 170.dp, height = 240.dp)
) {
    Text("LazyColumn in a Grid")
    // The LazyColumn is placed in the second row, filling the remaining space.
    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        items(100) { number ->
            PastelGreenCard("Card $number")
        }
    }
}

ความสูงของแถวที่กำหนดโดยใช้ตัวเลือกการกำหนดขนาดแทร็กหลัก 4 รายการ
รูปที่ 5 LazyColumn ในเซลล์ตารางกริด

กำหนดขนาดแทร็กตารางกริดแบบภายใน

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

  • GridTrackSize.MaxContent: ใช้ขนาดภายในสูงสุดของเนื้อหา (เช่น ความกว้างกำหนดโดยความยาวเต็มของข้อความในบล็อกข้อความโดยไม่มีการตัดคำ)
  • GridTrackSize.MinContent: ใช้ขนาดภายในต่ำสุดของเนื้อหา (เช่น ความกว้างกำหนดโดยคำเดียวที่ยาวที่สุดในบล็อกข้อความ)
  • GridTrackSize.Auto: ใช้ขนาดที่ยืดหยุ่นสำหรับแทร็กที่ปรับตามพื้นที่ว่าง โดยค่าเริ่มต้นจะมีลักษณะการทำงานเหมือน MaxContent แต่จะหดและตัดคำเนื้อหาให้พอดีกับคอนเทนเนอร์ระดับบนสุด

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

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
}

ขนาดโดยธรรมชาติที่ระบุในคอลัมน์
รูปที่ 5 ขนาดภายในที่ระบุในคอลัมน์

กำหนดช่องว่างระหว่างแถวและคอลัมน์

เมื่อปรับขนาดแทร็กตารางกริดแล้ว คุณสามารถแก้ไข ช่องว่างของตารางกริด เพื่อปรับระยะห่างระหว่างแทร็กได้ คุณสามารถระบุช่องว่างของคอลัมน์ด้วยฟังก์ชัน columnGap และช่องว่างของแถวด้วย rowGap ในตัวอย่างต่อไปนี้ มีช่องว่าง 16dp ระหว่างแต่ละแถว และช่องว่าง 8dp ระหว่างแต่ละคอลัมน์ (รูปที่ 5)

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}

ช่องว่างระหว่างแถวและคอลัมน์
รูปที่ 6 ช่องว่างระหว่างแถวและคอลัมน์

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

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}

กำหนดพื้นที่ตารางกริดด้วยพื้นที่ที่มีชื่อ

พื้นที่ที่มีชื่อช่วยให้คุณแนบชื่อกับกลุ่มเซลล์ตารางกริด, ซึ่งเรียกว่า พื้นที่ตารางกริด คุณสามารถใช้ชื่อเหล่านี้แทนดัชนีพิกัด เมื่อวางองค์ประกอบ UI ในตารางกริด

การใช้พื้นที่ที่มีชื่อมีประโยชน์หลัก 2 ข้อในการอ่านโค้ด

  • เมื่อกำหนดเลย์เอาต์ตารางกริด วัตถุประสงค์และการวางเนื้อหาที่คาดหวังจะชัดเจน
  • เมื่อเพิ่มเนื้อหา วัตถุประสงค์ของเนื้อหานั้นจะชัดเจน

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

ภายในแลมดา config ให้ใช้ฟังก์ชัน area ใน GridConfigurationScope เพื่อลงทะเบียนพื้นที่ที่มีชื่อในตารางกริด จากนั้นคุณสามารถกำหนดคอมโพสได้ย่อยให้กับพื้นที่เหล่านี้ได้โดยใช้ตัวปรับแต่ง gridItem ที่มีตัวระบุพื้นที่ที่เกี่ยวข้อง ฟังก์ชัน area จะจับคู่ตัวระบุเชิงความหมาย (เช่น ค่าคลาส enum หรือคีย์สตริง) กับชุดพิกัดตารางกริดจริง เส้นและดัชนีตารางกริดเป็นแบบเริ่มจาก 1 (นั่นคือ แถวแรกคือ 1 และคอลัมน์แรกคือ 1)

ตัวอย่างเช่น คุณกำหนดตารางกริดที่มีรหัสพื้นที่ 4 รายการ

/**
 * An enum representing the IDs for named areas within the grid.
 */
enum class GridAreaNames {
    Area1,
    Area2,
    Area3,
    Area4
}

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

Grid(
    config = {
        // Define a single column that takes all available width.
        repeat(2) { column(0.5f) }

        // Define four rows, each taking 25% of the total height.
        repeat(4) { row(0.25f) }

        // Define named grid areas by associating an areaId with specific row and column indices.
        // Row and column indices are 1-based.
        area(areaId = GridAreaNames.Area1, row = 1, column = 1, columnSpan = 2)
        area(areaId = GridAreaNames.Area2, row = 2, column = 1, rowSpan = 3)
        area(areaId = GridAreaNames.Area3, rows = 2..3, columns = 2..2)
        area(areaId = GridAreaNames.Area4, row = 4, column = 2)

        gap(4.dp)
    },
    modifier = Modifier.size(360.dp)
) {
    PastelRedCard(
        "Area 1",
        // Use Modifier.gridItem(areaId) to place this composable into the
        // grid area defined with the matching ID in the config block.
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area1)
    )
    PastelGreenCard(
        "Area 2",
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area2)
    )
    PastelBlueCard(
        "Area 3",
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area3)
    )
    PastelYellowCard(
        "Area 4",
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area4)
    )
}

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

ก่อนหน้า
เริ่มใช้งาน
ถัดไป
ตั้งค่าพร็อพเพอร์ตี้ของสินค้า