يسرّنا الإعلان عن أنّ الإصدار 1.2.0 من Material 3 Adaptive أصبح الآن إصدارًا ثابتًا.

يستند هذا الإصدار إلى أسس الإصدارات السابقة، ويوسّع نطاق التوافق ليشمل المزيد من نقاط التوقف لفئات أحجام النوافذ، بالإضافة إلى استراتيجيات جديدة لوضع لوحات العرض تلقائيًا.

الميزات الجديدة في الإصدار 1.2.0 من Material 3 Adaptive

تم إنشاء هذا الإصدار الثابت استنادًا إلى توافق WindowManager 1.5.0 مع نقاط التوقّف الكبيرة والكبيرة جدًا، ويقدّم استراتيجيتَي إعادة التدفق والتحليق الجديدتَين لكل من ListDetailPaneScaffold وSupportingPaneScaffold. 

فئات جديدة لأحجام النوافذ: كبيرة وكبيرة جدًا

قدّمت الإصدار 1.5.0 من WindowManager نقطتَي توقّف جديدتَين لفئة حجم النافذة حسب العرض من أجل توفير دعم لنوافذ أكبر من فئة حجم النافذة "موسّع". يمكن تفعيل نقاط التوقّف "كبير" (L) و"كبير جدًا" (XL) من خلال إضافة المَعلمة التالية إلى طلب currentWindowAdaptiveInfo() في قاعدة الرموز البرمجية:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

تتيح هذه العلامة للمكتبة عرض نقاط توقّف L وXL أيضًا عند الحاجة.

استراتيجيتان جديدتان للتكيّف: إعادة التدفق والتحليق

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

باستخدام ميزة إعادة التدفق، تتم إعادة ترتيب اللوحات عند تغيير حجم النافذة أو نسبة العرض إلى الارتفاع، ما يؤدي إلى وضع لوحة ثانية بجانب اللوحة الأولى عندما تكون النافذة عريضة بما يكفي، أو إعادة تدفق اللوحة الثانية أسفل اللوحة الأولى عندما تكون النافذة أطول. تنطبق هذه التقنية أيضًا عندما تصبح النافذة أصغر: يتم إعادة ترتيب المحتوى إلى الأسفل.

إعادة ترتيب جزء استنادًا إلى حجم النافذة

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

تحريك لوحة من الجانب إلى الوسط استنادًا إلى نسبة العرض إلى الارتفاع

يمكن تعريف استراتيجيتَي "التنقّل" و"التحليق" داخل الدالة الإنشائية Navigator باستخدام المَعلمة adaptStrategies، ويمكن تطبيق الاستراتيجيتَين على عرض على شكل قائمة مع تفاصيل ولوحة المحتوى scaffolds:

val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>(
        adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies(
            detailPaneAdaptStrategy = AdaptStrategy.Reflow(
                reflowUnder = ListDetailPaneScaffoldRole.List
            ),
            extraPaneAdaptStrategy = AdaptStrategy.Levitate(
                alignment = Alignment.Center
            )
        )
    )

لمزيد من المعلومات حول كيفية الاستفادة من هذه الاستراتيجيات التكيّفية الجديدة، يُرجى الاطّلاع على موقع Material الإلكتروني ورمز نموذجي التعليمات البرمجية الكامل على GitHub.