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