ضبط خصائص المنتج أو الخدمة

في حين يحدّد إعداد Grid البنية العامة، يمكنك استخدام المعدِّل gridItem للتحكّم في موضع العناصر وامتدادها، ومحاذاتها ضمن هذه البنية.

ضبط موضع العنصر

يمكنك وضع عنصر في مسار أو خلية معيّنة باستخدام المعلَمتَين row وcolumn. تكون فهارس الإحداثيات هي الأنسب لتنسيقات الشبكة البسيطة. بالنسبة إلى التنسيقات الأكبر أو الأكثر تعقيدًا، يمكنك تحديد مناطق مُسمّاة بدلاً من ذلك.

تحدّد المعلَمتان row وcolumn فهارس مسار الصف والعمود اللذين يتم وضع العنصر فيهما. تستند فهارس المسارات إلى الرقم 1، أي تبدأ من الرقم واحد. إذا حدّدت row أو column فقط (وليس كلتيهما)، سيتم وضع العنصر في المساحة التالية المتاحة في هذا المسار. إذا حدّدت كلتيهما، سيتم وضع العنصر في تلك الخلية.

استخدِم عددًا صحيحًا موجبًا لتحديد فهرس المسار من البداية. على سبيل المثال، لوضع عنصر في الصف الأول والعمود الأول، استخدِم gridItem(row = 1, column = 1).

استخدِم عددًا صحيحًا سالبًا لتحديد المسار بالنسبة إلى النهاية. على سبيل المثال، لوضع عنصر في الصف والعمود قبل الأخيرَين، استخدِم gridItem(row = -2, column = -2).

في المثال التالي، يتم وضع البطاقة #2 في الصف الثاني والعمود الثاني. يتم تخصيص البطاقة #3 للصف الأخير (الذي يحمل الفهرس -1)، حيث تشغل تلقائيًا أول عمود متاح في هذا المسار (الشكل 1).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

الشكل 1. يتم وضع البطاقة #2 في خلية الشبكة في الصف الثاني والعمود الثاني، ويتم وضع البطاقة #3 في العمود الأول في الصف الثالث.

امتداد الصفوف والأعمدة

استخدِم المعلَمتَين rowSpan وcolumnSpan لمدّ عنصر على خلايا متعددة. يمكنك وضع عنصر في واجهة المستخدم في منطقة شبكة، وهي المنطقة التي تتألف من عدة خلايا شبكة. يتيح لك المعدِّل gridItem تحديد منطقة الشبكة باستخدام المعلَمتَين rowSpan وcolumnSpan. في المثال التالي، يتم وضع البطاقة #1 في المنطقة التي تتألف من صفَين وعمودَين (الشكل 2).

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

الشكل 2. تمتد البطاقة #4 على ثلاثة أعمدة.

ضبط المحاذاة في منطقة شبكة

يمكنك ضبط محاذاة عنصر في واجهة المستخدم في منطقة شبكة من خلال تحديدها في المعلَمة alignmentللمعدِّل gridItem. في المثال التالي، يتم وضع #1 في وسط منطقة الشبكة التي تتألف من عمودَين وصفَين.

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

الشكل 3. يتم وضع النص الذي يتضمّن #1 في وسط منطقة الشبكة التي تتألف من صفَين وعمودَين.

الوضع التلقائي مختلطًا بالعناصر الموضوعة

يخضع عنصر في واجهة المستخدم في Grid الذي لا يتضمّن تحديدًا للموضع للوضع التلقائي. يوضّح هذا المثال كيف يمكنك مزج العناصر التي تم وضعها تلقائيًا وعناصر واجهة المستخدم التي تتضمّن خلايا شبكة محدّدة. يتم وضع البطاقة #2 والبطاقة #4 في خلايا شبكة محدّدة، ويتم وضع العناصر الأخرى تلقائيًا.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt

الشكل 4. يتم وضع البطاقة #3 بجانب البطاقة #1، لأنّها عملية وضع تلقائي.