ما الجديد في إصدار أبريل 2026 من Jetpack Compose

أصبح إصدار أبريل 2026 من Jetpack Compose اليوم إصدارًا ثابتًا. يتضمّن هذا الإصدار الإصدار 1.11 من وحدات Compose الأساسية (راجِع ربط قائمة إدارة مواد العرض بالكامل)، وأدوات تصحيح أخطاء العناصر المشترَكة، وأحداث لوحة اللمس، والمزيد. لدينا أيضًا بعض واجهات برمجة التطبيقات التجريبية التي نودّ أن تجربها وتزوّدنا بملاحظاتك عنها.

لاستخدام إصدار اليوم، عليك ترقية إصدار قائمة إدارة مواد العرض في Compose إلى:

implementation(platform("androidx.compose:compose-bom:2026.04.01"))

التغييرات في الإصدار 1.11.0 من Compose

تنفيذ الروتينات الفرعية في الاختبارات

نقدّم تحديثًا رئيسيًا لطريقة تعامل Compose مع توقيت الاختبار. بعد فترة الاشتراك التي تم الإعلان عنها في الإصدار 1.10 من Compose، أصبحت الآن واجهات برمجة التطبيقات للاختبار في الإصدار 2 هي الإعدادات التلقائية، وتم إيقاف الإصدار 1 من واجهات برمجة التطبيقات نهائيًا. التغيير الرئيسي هو تحويل أداة إرسال الاختبار التلقائية. في حين أنّ الإصدار 1 من واجهات برمجة التطبيقات كان يعتمد على UnconfinedTestDispatcher الذي كان ينفّذ الروتينات الفرعية على الفور، يستخدم الإصدار 2 من واجهات برمجة التطبيقات StandardTestDispatcher. هذا يعني أنّه عند تشغيل روتين فرعي في اختباراتك، يتم الآن وضعه في قائمة الانتظار ولا يتم تنفيذه إلى أن يتم تقديم الساعة الافتراضية.

يحاكي ذلك بشكل أفضل ظروف الإنتاج، ما يؤدي إلى إزالة حالات التنافس بشكل فعّال ويجعل مجموعة الاختبارات أكثر قوة وأقل عرضة للخطأ بشكل ملحوظ.

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

تحسينات على العناصر المشترَكة وأدوات الصور المتحركة

أضفنا أيضًا بعض أدوات تصحيح الأخطاء المرئية المفيدة للعناصر المشترَكة وModifier.animatedBounds. يمكنك الآن الاطّلاع على ما يحدث بالضبط في الخلفية، مثل الحدود المستهدَفة ومسارات الصور المتحركة وعدد النتائج المطابقة التي تم العثور عليها، ما يسهّل كثيرًا تحديد سبب عدم تصرّف الانتقال على النحو المتوقّع. لاستخدام الأدوات الجديدة، ما عليك سوى إحاطة SharedTransitionLayout بالدالة المركّبة LookaheadAnimationVisualDebugging. 

LookaheadAnimationVisualDebugging(
    overlayColor = Color(0x4AE91E63),
    isEnabled = true,
    multipleMatchesColor = Color.Green,
    isShowKeylabelEnabled = false,
    unmatchedElementColor = Color.Red,
) {
    SharedTransitionLayout {
        CompositionLocalProvider(
            LocalSharedTransitionScope provides this,
        ) {
            // your content
        }
    }
}

أحداث لوحة اللمس

لقد جدّدنا إمكانية استخدام لوحات اللمس في Compose، مثل لوحات اللمس المضمّنة في أجهزة الكمبيوتر المحمولة أو لوحات اللمس القابلة للتوصيل بالأجهزة اللوحية أو لوحات اللمس الخارجية أو الافتراضية. سيتم الآن بشكل عام اعتبار أحداث لوحة اللمس الأساسية أحداث `PointerType.Mouse`، ما يواءم سلوك الماوس ولوحة اللمس ليطابق بشكل أفضل توقّعات المستخدمين. في السابق، كانت أحداث لوحة اللمس هذه تُفسَّر على أنّها أصابع شاشة لمس وهمية من PointerType.Touch، ما أدّى إلى تجارب مربكة للمستخدمين. على سبيل المثال، كان النقر والسحب باستخدام لوحة اللمس يؤديان إلى التمرير بدلاً من الاختيار. من خلال تغيير نوع المؤشر الذي تتضمّنه هذه الأحداث في أحدث إصدار من Compose، لن يؤدي النقر والسحب باستخدام لوحة اللمس إلى التمرير بعد الآن.

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

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

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

الإعدادات التلقائية لمضيف التركيب (وقت تشغيل Compose)

قدّمنا HostDefaultProvider وLocalHostDefaultProvider وHostDefaultKey وViewTreeHostDefaultKey لتوفير الخدمات على مستوى المضيف مباشرةً من خلال وقت تشغيل Compose. يزيل ذلك حاجة المكتبات إلى الاعتماد على compose-ui لعمليات البحث، ما يحسّن دعم Kotlin Multiplatform. لربط هذه القيم بشجرة التركيب، يمكن لمؤلّفي المكتبات استخدام compositionLocalWithHostDefaultOf لإنشاء CompositionLocal يحلّ الإعدادات التلقائية من المضيف.

أغلفة المعاينة

المعاينات المخصّصة في "استوديو Android" هي ميزة جديدة تسمح لك بتحديد طريقة عرض محتويات معاينة Compose بالضبط.

من خلال تنفيذ واجهة PreviewWrapperProvider وتطبيق التعليق التوضيحي الجديد @PreviewWrapper، يمكنك بسهولة إدخال منطق مخصّص، مثل تطبيق Theme معيّن. يمكن تطبيق التعليق التوضيحي على دالة تم وضع التعليق التوضيحي @Composable و@Preview أو @MultiPreview عليها، ما يقدّم حلاً عامًا وسهل الاستخدام يعمل على مستوى ميزات المعاينة ويقلّل بشكل كبير من الرموز البرمجية المتكرّرة.

class ThemeWrapper: PreviewWrapperProvider {
    @Composable
    override fun Wrap(content: @Composable (() -> Unit)) {
        JetsnackTheme {
            content()
        }
    }
}


@PreviewWrapper(ThemeWrapper::class)
@Preview
@Composable
private fun ButtonPreview() {
    // JetsnackTheme in effect
    Button(onClick = {}) {
        Text(text = "Demo")
    }
}

الإيقاف النهائي والإزالة

• كما تم الإعلان في مشاركة المدونة حول الإصدار 1.10 من Compose، سنوقف نهائيًا استخدام Modifier.onFirstVisible(). غالبًا ما كان اسمها يؤدي إلى مفاهيم خاطئة، خاصةً في التنسيقات المؤجّلة، حيث كان يتم تشغيلها عدة مرات أثناء التمرير. ننصحك بنقل البيانات إلى Modifier.onVisibilityChanged()، ما يسمح بتتبُّع حالات الظهور يدويًا بشكل أكثر دقة بما يتناسب مع متطلبات حالة الاستخدام المحدّدة.
• تمت إزالة العلامة ComposeFoundationFlags.isTextFieldDpadNavigationEnabled لأنّه يتم الآن دائمًا تفعيل التنقّل باستخدام لوحة الاتجاهات في TextFields تلقائيًا. يضمن السلوك الجديد أنّ أحداث لوحة الاتجاهات من لوحة ألعاب أو جهاز تحكّم عن بُعد في التلفزيون تحرّك المؤشر أولاً في الاتجاه المحدّد. لا يمكن نقل التركيز إلى عنصر آخر إلا عندما يصل المؤشر إلى نهاية النص.

واجهات برمجة التطبيقات القادمة

في الإصدار 1.12.0 القادم من Compose، ستتم ترقية compileSdk إلى compileSdk 37، مع الإصدار 9 من المكوّن الإضافي لنظام Gradle المتوافق مع Android وجميع التطبيقات والمكتبات التي تعتمد على Compose والتي ستكتسب هذا المتطلب. ننصحك بالاطّلاع على أحدث الإصدارات التي تم طرحها، لأنّ Compose يهدف إلى اعتماد compileSdks الجديدة على الفور لتوفير إمكانية الوصول إلى أحدث ميزات Android. احرص على الاطّلاع على المستندات هنا لمزيد من المعلومات حول إصدار المكوّن الإضافي لنظام Gradle المتوافق مع Android المتوافق مع مستويات واجهة برمجة التطبيقات المختلفة. 

في الإصدار 1.11.0 من Compose، يتم طرح واجهات برمجة التطبيقات التالية على أنّها @Experimental، ونتطلّع إلى تلقّي ملاحظاتك أثناء استكشافها في تطبيقاتك. يُرجى العِلم أنّ @Experimental APIs يتم توفيرها للتقييم المبكر وتلقّي الملاحظات، وقد تخضع لتغييرات كبيرة أو تتم إزالتها في الإصدارات المستقبلية.

التصاميم (تجريبية)

نقدّم واجهة برمجة تطبيقات أساسية تجريبية جديدة للتصميم. ‫Style API هي نموذج جديد لتخصيص العناصر المرئية للمكوّنات، والتي كانت تُجرى تقليديًا باستخدام المعدِّلات. تم تصميمها لتوفير تخصيص أعمق وأسهل من خلال عرض مجموعة معايير التعلُّم من الخصائص القابلة للتصميم مع تصميم بسيط يستند إلى الحالة وعمليات انتقال متحركة. باستخدام واجهة برمجة التطبيقات الجديدة هذه، نلاحظ بالفعل تحسينات واعدة على مستوى الأداء. نخطط لاعتماد التصاميم في مكوّنات Material بعد أن تصبح Style API ثابتة.

في ما يلي مثال أساسي على إلغاء خلفية تصميم حالة الضغط:

@Composable
fun LoginButton(modifier: Modifier = Modifier) {
    Button(
        onClick = {
            // Login logic
        },
        modifier = modifier,
        style = {
            background(
                Brush.linearGradient(
                    listOf(lightPurple, lightBlue)
                )
            )
            width(75.dp)
            height(50.dp)
            textAlign(TextAlign.Center)
            externalPadding(16.dp)

            pressed {
                background(
                    Brush.linearGradient(
                        listOf(Color.Magenta, Color.Red)
                    )
                )
            }
        }
    ){
        Text(
            text = "Login",
        )
    }
}

يمكنك الاطّلاع على المستندات وتسجيل أي أخطاء هنا.

‫MediaQuery (تجريبية)

توفر واجهة برمجة التطبيقات الجديدة mediaQuery طريقة تعريفية وفعالة لتكييف واجهة المستخدم مع بيئتها. تجرّد هذه الواجهة عملية استرجاع المعلومات المعقّدة إلى شروط بسيطة ضمن UiMediaScope، ما يضمن عدم إعادة التركيب إلا عند الحاجة.

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

@Composable
fun isTabletopPosture(
    context: Context = LocalContext.current
): Boolean {
    val windowLayoutInfo by
        WindowInfoTracker
            .getOrCreate(context)
            .windowLayoutInfo(context)
            .collectAsStateWithLifecycle(null)

    return windowLayoutInfo.displayFeatures.any { displayFeature ->
        displayFeature is FoldingFeature &&
            displayFeature.state == FoldingFeature.State.HALF_OPENED &&
            displayFeature.orientation == FoldingFeature.Orientation.HORIZONTAL
    }
}

@Composable
fun VideoPlayer() {
    if(isTabletopPosture()) {
        TabletopLayout()
    } else {
        FlatLayout()
    }
}

الآن، باستخدام UIMediaQuery، يمكنك إضافة بنية mediaQuery للاستعلام عن خصائص الجهاز، مثل ما إذا كان الجهاز في وضع سطح المنضدة:

@OptIn(ExperimentalMediaQueryApi::class)
@Composable
fun VideoPlayer() {
    if (mediaQuery { windowPosture == UiMediaScope.Posture.Tabletop }) {
        TabletopLayout()
    } else {
        FlatLayout()
    }
}

يمكنك الاطّلاع على المستندات وتسجيل أي أخطاء هنا.

الشبكة (تجريبية)

Grid هي واجهة برمجة تطبيقات جديدة وقوية لإنشاء تنسيقات معقدة ثنائية الأبعاد في Jetpack Compose. في حين أنّ Row وColumn رائعتان للتصاميم الخطية، تمنحك Grid التحكّم الهيكلي اللازم لبنية على مستوى الشاشة ومكوّنات معقدة بدون تكلفة إضافية لقائمة قابلة للتمرير. تسمح لك Grid بتحديد التنسيق باستخدام المسارات والفواصل والخلايا، ما يقدّم خيارات تحديد الحجم المألوفة، مثل Dp والنسب المئوية وأحجام المحتوى الأساسية ووحدات "Fr" المرنة. 

@OptIn(ExperimentalGridApi::class)
@Composable
fun GridExample() {
    Grid(
        config = {
            repeat(4) { column(0.25f) }
            repeat(2) { row(0.5f) }
            gap(16.dp)
        }
    ) {
        Card1(modifier = Modifier.gridItem(rowSpan = 2)
        Card2(modifier = Modifier.gridItem(colmnSpan = 3)
        Card3(modifier = Modifier.gridItem(columnSpan = 2)
        Card4()
    }
}

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

يمكنك الاطّلاع على المستندات وتسجيل أي أخطاء هنا. 

‫FlexBox (تجريبية)

FlexBox هي حاوية تنسيق مصمّمة لواجهات المستخدم عالية الأداء والقابلة للتكيّف. تُدير هذه الحاوية حجم العناصر وتوزيع المساحة استنادًا إلى أبعاد الحاوية المتاحة.وتتعامل مع المهام المعقدة، مثل التفاف العناصر (wrap) ومحاذاة العناصر على محاور متعددة (justifyContent, alignItems, alignContent). وتسمح للعناصر بالتوسّع (grow) أو الانكماش (shrink) لملء الحاوية. 

@OptIn(ExperimentalFlexBoxApi::class)
fun FlexBoxWrapping(){
    FlexBox(
        config = {
            wrap(FlexWrap.Wrap)
            gap(8.dp)
        }
    ) {
        RedRoundedBox()
        BlueRoundedBox()
        GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow(1.0f) })
        OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.7f) })
        PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.3f) })
    }
}

يمكنك الاطّلاع على المستندات وتسجيل أي أخطاء هنا.

تنفيذ جديد لـ SlotTable (تجريبي)

قدّمنا تنفيذًا جديدًا لـ SlotTable، وهو غير مفعّل تلقائيًا في هذا الإصدار. ‏SlotTable هي بنية البيانات الداخلية التي يستخدمها وقت تشغيل Compose لتتبُّع حالة التسلسل الهرمي للتركيب، وتتبُّع عمليات الإبطال/إعادة التركيب، وتخزين القيم التي تم تذكّرها، وتتبُّع جميع بيانات وصف التركيب في وقت التشغيل. تم تصميم هذا التنفيذ الجديد لتحسين الأداء، خاصةً في ما يتعلق بالتعديلات العشوائية.

لتجربة SlotTable الجديد، فعِّل ComposeRuntimeFlags.isLinkBufferComposerEnabled. 

ابدأ الترميز اليوم.

مع توفّر العديد من واجهات برمجة التطبيقات الجديدة والمثيرة في Jetpack Compose، والعديد من واجهات برمجة التطبيقات القادمة، لم يكن هناك وقت أفضل من الآن لنقل البيانات إلى Jetpack Compose.كالعادة، نقدّر ملاحظاتك وطلبات الميزات (خاصةً بشأن الميزات @Experimental التي لا تزال قيد التطوير)، لذا يُرجى تسجيلها هنا. نتمنّى لك تجربة ممتعة في إنشاء المحتوى.