ضبط خصائص الحاوية

يمكنك تحديد إعدادات حاوية شبكة لإنشاء تنسيقات مرنة تتجاوب مع أحجام الشاشات وأنواع المحتوى المختلفة. توضّح هذه الصفحة كيفية إجراء ما يلي:

• تحديد شبكة: يمكنك إعداد البنية الأساسية للصفوف والأعمدة.
• وضع العناصر في شبكة: يمكنك التعرّف على كيفية وضع العناصر في خلايا الشبكة وكيفية تغيير اتجاه التدفق.
• إدارة حجم المسار: يمكنك استخدام أحجام المسارات الثابتة والنسبة المئوية والمرنة والجوهرية لضبط أحجام المسارات.
• ضبط الفواصل: يمكنك إدارة "المسافات" بين الصفوف والأعمدة.

تحديد شبكة

تتكوّن الشبكة من أعمدة وصفوف. يحتوي العنصر الإنشائي Grid على مَعلمة config تقبل تعبير لامدا لتحديد الأعمدة والصفوف ضمن GridConfigurationScope. يحدّد المثال التالي شبكة تحتوي على ثلاثة صفوف وعمودَين، لكل منهما حجم ثابت محدّد بـ Dp:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

وضع العناصر في شبكة

يأخذ العنصر الإنشائي Grid عناصر واجهة المستخدم في تعبير لامدا content ويضعها في خلايا الشبكة. تنسّق الشبكة العناصر بغض النظر عمّا إذا كنت قد حدّدت الصفوف والأعمدة بشكل صريح أم لا. يحاول العنصر الإنشائي Grid بشكلٍ تلقائي وضع عنصر في واجهة المستخدم في خلية الشبكة المتاحة في الصف. وإذا لم يتمكّن من ذلك، يضعه في خلية شبكة متاحة في الصف التالي. إذا لم تكن هناك خلايا فارغة، ينشئ العنصر الإنشائي Grid صفًا جديدًا.

في المثال التالي، تحتوي الشبكة على ست خلايا شبكة وتضع بطاقة في كل منها (الشكل 1). تبلغ أبعاد كل خلية شبكة 160dp × 90dp، ما يجعل إجمالي حجم الشبكة 320dp × 270dp.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

الشكل 1. تم وضع ست بطاقات في شبكة تحتوي على ثلاثة صفوف وعمودَين.

لتغيير هذا السلوك التلقائي إلى التعبئة حسب العمود، اضبط السمة flow على GridFlow.Column.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

الشكل 2 : GridFlow.Row (على اليمين) وGridFlow.Column (على اليسار)

إدارة حجم المسار

يُشار إلى الصفوف والأعمدة بشكل جماعي باسم مسار الشبكة. يمكنك تحديد حجم مسار الشبكة باستخدام إحدى الطرق التالية:

• ثابت (Dp): يخصّص حجمًا معيّنًا (مثلاً، column(180.dp)).
• النسبة المئوية (Float): يخصّص نسبة مئوية من إجمالي المساحة المتاحة من 0.0f إلى 1.0f (مثلاً، row(0.5f) لـ %50).
• مرن (Fr): يوزّع المساحة المتبقية بالتناسب بعد احتساب المسارات الثابتة والنسبة المئوية. على سبيل المثال، إذا تم ضبط صفَّين على 1.fr و3.fr، يتلقّى الصف الأخير% 75 من الارتفاع المتبقي.
• جوهرية: يضبط حجم المسار استنادًا إلى المحتوى بداخله. لمزيد من المعلومات، يُرجى الاطّلاع على تحديد حجم مسار الشبكة بشكل جوهري.

يستخدم المثال التالي خيارات مختلفة لضبط حجم المسار لتحديد ارتفاعات الصفوف:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}
GridTrackSize.kt

الشكل 3 : ارتفاعات الصفوف المحدّدة باستخدام خيارات ضبط حجم المسار الأربعة الأساسية في Grid

ضبط الحد الأدنى لحجم مسارات الشبكة المرنة

عندما لا تحتوي حاوية الشبكة على مساحة متبقية، يمكن أن يتقلّص المسار المرن العادي إلى 0.dp. لمنع حدوث ذلك والتأكّد من عدم ضغط المحتوى، استخدِم GridTrackSize.MinMax لفرض حد أدنى صريح للحجم مع الحفاظ على مرونة المسار.

يخصّص المثال التالي ما لا يقل عن 100.dp للصف الأول:

Grid(
    config = {
        column(1f)
        // The first row has a minimum height of 100.dp and can expand to 
        // the half of the remaining space.
        row(GridTrackSize.MinMax(100.dp, 1.fr))
        // The second row takes the half of the remaining space.
        row(1.fr)
        // The third row has a fixed height of 200.dp.
        row(200.dp)
    },
    modifier = Modifier.size(360.dp) // Total grid height is 360.dp
) {
    PastelRedCard("MinMax(100.dp, 1.fr)")
        PastelGreenCard("Flex(1.fr)")
    PastelBlueCard("Fixed(200.dp)")
}
GridTrackSize.kt

الشكل 4. يبلغ ارتفاع الصف الأول 100.dp على الأقل.

ضبط الحد الأدنى لحجم مسار الشبكة لوضع القوائم الكسولة

تطلب المسارات المرنة العادية تلقائيًا الأحجام الجوهرية للعناصر التابعة لها لضبط حجم أساسي. ومع ذلك، يمنع Jetpack Compose طلب الأحجام الجوهرية لـ SubcomposeLayout، التي تدعم مكوّنات، مثل LazyColumn و LazyRow.

يؤدي وضع قائمة كسولة داخل مسار مرن عادي إلى حدوث عطل IllegalStateException. لوضع القوائم الكسولة بأمان داخل مسار شبكة مرن، استخدِم MinMax مع حد أدنى صريح للحجم (مثل 0.dp) لتجاوز عملية القياس الجوهرية.

Grid(
    config = {
        column(1f)
        // The first row's height is determined by the height of the Text composable.
        row(GridTrackSize.Auto)
        // The second row occupies the remaining space, allowing the LazyColumn to scroll.
        row(GridTrackSize.MinMax(0.dp, 1.fr))

        gap(8.dp)
    },
    modifier = Modifier.size(width = 170.dp, height = 240.dp)
) {
    Text("Lazy column in a Grid")
    // The LazyColumn is placed in the second row, filling the remaining space.
    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        items(100) { number ->
            PastelGreenCard("Card $number")
        }
    }
}
GridTrackSize.kt

الشكل 5. LazyColumn في خلية شبكة

تحديد حجم مسار الشبكة بشكل جوهري

يمكنك استخدام ضبط الحجم الجوهري لـ Grid عندما تريد أن يتكيّف التنسيق مع المحتوى، بدلاً من فرضه في حاوية ثابتة. يتم تحديد حجم مسار الشبكة باستخدام القيم التالية:

• GridTrackSize.MaxContent: استخدِم الحد الأقصى للحجم الجوهري للمحتوى (مثلاً، يتم تحديد العرض حسب الطول الكامل للنص في كتلة نصية بدون التفاف).
• GridTrackSize.MinContent: استخدِم الحد الأدنى للحجم الجوهري للمحتوى (مثلاً، يتم تحديد العرض حسب أطول كلمة واحدة في كتلة نصية).
• GridTrackSize.Auto: استخدِم حجمًا مرنًا لمسار يتكيّف استنادًا إلى المساحة المتاحة. يتصرف هذا الخيار مثل MaxContent تلقائيًا، ولكنّه يقلّص المحتوى ويغلّفه ليناسب الحاوية الرئيسية.

يضع المثال التالي نصَّين جنبًا إلى جنب. يتم تحديد حجم العمود للنص الأول حسب الحد الأدنى المطلوب لعرض النص، ويعتمد عرض العمود الثاني على الحد الأقصى المطلوب لعرض النص.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
}
GridTrackSize.kt

الشكل 5. الأحجام الجوهرية المحدّدة في الأعمدة

ضبط الفواصل بين الصفوف والأعمدة

بعد ضبط حجم مسارات الشبكة، يمكنك تعديل فواصل الشبكة لتحسين التباعد بين المسارات. يمكنك تحديد فواصل الأعمدة باستخدام الدالة columnGap، وفواصل الصفوف باستخدام rowGap. في المثال التالي، هناك فاصل 16dp بين كل صف، وفاصل 8dp بين كل عمود (الشكل 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

الشكل 6. الفواصل بين الصفوف والأعمدة

يمكنك أيضًا استخدام الدالة الملائمة gap لتحديد فواصل لها نفس حجم العمود والصف، ولتحديد أحجام العمود والفاصل بشكل منفصل باستخدام دالة واحدة. يضيف الرمز التالي فواصل 8dp إلى الشبكة:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt