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

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