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

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

ضبط موضع السلعة

ضَع عنصرًا في مسار أو خلية معيّنة باستخدام المَعلمتَين row وcolumn.

تحدّد المَعلمتان row وcolumn فهارس مسارات الصفوف والأعمدة التي يتم وضع العنصر فيها. وتستند فهارس المسارات إلى الرقم 1، أي أنّها تبدأ بالرقم 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

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

استخدِم المَعلمتَين 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

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

يمكنك ضبط محاذاة عنصر في واجهة المستخدم في مساحة شبكة من خلال تحديدها في المَعلمة 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

الإعلانات التي يتم عرضها تلقائيًا مع الإعلانات التي يتم عرضها في مواضع محدّدة

يخضع عنصر في واجهة المستخدم في 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