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

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

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

يستند هذا الإصدار المستقر إلى الإصدار 1.5.0 من WindowManager الذي يتيح نقاط توقف كبيرة وكبيرة جدًا، ويقدّم استراتيجيتَي إعادة التدفق والرفع الجديدتَين للسمتَين 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.