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

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