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

لاستخدام الإصدار الحالي، يجب ترقية إصدار Compose BOM إلى:

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

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

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

نحن بصدد طرح تحديث رئيسي على طريقة تعامل 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
        }
    }
}

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

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

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

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

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

الإعدادات التلقائية لمضيف الإنشاء (وقت تشغيل Compose)

لقد أضفنا HostDefaultProvider وLocalHostDefaultProvider وHostDefaultKey وViewTreeHostDefaultKey لتوفير خدمات على مستوى المضيف مباشرةً من خلال compose-runtime. يؤدي ذلك إلى إزالة الحاجة إلى أن تعتمد المكتبات على 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")
    }
}

الميزات التي سيتم إيقافها نهائيًا وإزالتها

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

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

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

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