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

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

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

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

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

تنفيذ الكوروتين في الاختبارات

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

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

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

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

أضفنا أيضًا بعض أدوات تصحيح الأخطاء المرئية المفيدة للعناصر المشتركة و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-runtime. يؤدي ذلك إلى إلغاء حاجة المكتبات إلى الاعتماد على 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 أصبح مفعَّلاً دائمًا بشكل تلقائي. يضمن السلوك الجديد أن تؤدي أحداث لوحة التحكّم من جهاز تحكّم في الألعاب أو جهاز تحكّم عن بُعد للتلفزيون إلى تحريك المؤشر أولاً في الاتجاه المحدّد. ويمكن نقل التركيز إلى عنصر آخر فقط عندما يصل المؤشر إلى نهاية النص.

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

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

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

الأنماط (ميزة تجريبية)

نقدّم واجهة برمجة تطبيقات أساسية تجريبية جديدة للتنسيق. تُعدّ واجهة برمجة التطبيقات Style API نموذجًا جديدًا لتخصيص العناصر المرئية للمكوّنات، والتي يتم تنفيذها عادةً باستخدام المُعدِّلات. تم تصميمها لتوفير إمكانية تخصيص أعمق وأسهل من خلال عرض مجموعة معايير التعلُّم من السمات القابلة للتنسيق مع تنسيق بسيط مستند إلى الحالة وانتقالات متحركة. من خلال واجهة برمجة التطبيقات الجديدة هذه، نلاحظ حاليًا مزايا واعدة في الأداء. نخطّط لاعتماد "الأنماط" في مكوّنات Material Design بعد أن تصبح واجهة 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 التي لا تزال قيد التطوير)، لذا يُرجى إرسالها هنا. نتمنى لك تجربة ممتعة.