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

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

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

التغييرات في Compose 1.11.0

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

نقدّم تحديثًا رئيسيًا لطريقة تعامل Compose مع توقيت الاختبار. بعد فترة الاشتراك التي تم الإعلان عنها في Compose 1.10، أصبحت واجهات برمجة التطبيقات للاختبار في الإصدار 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: PreviewWrapper {
    @Composable
    override fun Wrap(content: @Composable (() -> Unit)) {
        JetsnackTheme {
            content()
        }
    }
}

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

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

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

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

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

في Compose 1.11.0، يتم تقديم واجهات برمجة التطبيقات التالية على أنّها @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 التي لا تزال قيد التطوير)، لذا يُرجى إرسالها هنا. نتمنّى لك تجربة ممتعة في إنشاء المحتوى.