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

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

الشكل 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، لأنّها موضع تلقائي.