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

في حين يحدّد إعداد 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

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

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