نقل البيانات من المادة 2 إلى المادة 3 في Compose

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

يركّز هذا الدليل على الانتقال من مكتبة Jetpack Compose (androidx.compose.material) في Jetpack إلى مكتبة Jetpack Compose 3 (androidx.compose.material3) Jetpack.

المناهج

بشكل عام، يجب عدم استخدام الحسابَين M2 وM3 معًا على المدى الطويل في تطبيق واحد. ويرجع ذلك إلى حقيقة أن نظامي التصميم والمكتبات المعنيتان مختلفان بشكل كبير من حيث تصميمات تجربة المستخدم وواجهة المستخدم وعمليات تنفيذ Compose.

قد يستخدم تطبيقك نظام تصميم، مثل نظام تم إنشاؤه باستخدام Figma. في مثل هذه الحالات، ننصحك أنت أو فريق التصميم بنقل البيانات من الإصدار M2 إلى M3 قبل بدء عملية نقل Compose. ليس من المنطقي نقل تطبيق إلى M3 إذا كان تصميم تجربة المستخدم/واجهة المستخدم يعتمد على M2.

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

حالات نقل البيانات

عليك بدء عملية نقل البيانات في أقرب وقت ممكن. ومع ذلك، من المهم التفكير في ما إذا كان تطبيقك في وضع واقعي أم لا بخصوص الانتقال الكامل من الإصدار M2 إلى الإصدار M3. هناك بعض السيناريوهات "المحظورة" التي يجب التفكير فيها قبل البدء:

وحتى إذا كنت متأثرًا بالسيناريوهات المذكورة أعلاه، يجب عليك اتباع نهج تدريجي للنقل قبل تنفيذ تحديث للتطبيق وإصداره. في هذه الحالات، عليك استخدام الحسابَين M2 وM3 جنبًا إلى جنب، مع إيقاف الإصدار M2 تدريجيًا أثناء الانتقال إلى الإصدار M3.

النهج المرحلي

في ما يلي الخطوات العامة لنقل البيانات على مراحل:

1. أضِف تبعية M3 إلى جانب تبعية M2.
2. يمكنك إضافة إصدارات M3 من مظاهر تطبيقك إلى جانب إصدارات M2 من مظاهر التطبيق.
3. يجب نقل الوحدات الفردية أو الشاشات أو العناصر القابلة للإنشاء إلى الإصدار M3، وفقًا لحجم تطبيقك ودرجة تعقيده (راجِع الأقسام أدناه للاطّلاع على التفاصيل).
4. وبعد اكتمال عملية النقل، يجب إزالة إصدارات M2 من مظاهر تطبيقك.
5. أزِل تبعية M2.

التبعيات

يتضمّن الإصدار M3 حزمة وإصدارًا منفصلَين إلى الإصدار M2:

implementation "androidx.compose.material:material:$m2-version"

implementation "androidx.compose.material3:material3:$m3-version"

يمكنك الاطّلاع على أحدث إصدارات M3 في صفحة إصدارات Compose Material 3.

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

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

تعتبر بعض واجهات برمجة تطبيقات M3 تجريبية. في هذه الحالات، يجب تفعيل الميزة على مستوى الوظيفة أو الملف باستخدام التعليق التوضيحي ExperimentalMaterial3Api:

import androidx.compose.material3.ExperimentalMaterial3Api

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

التصميم

في كل من M2 وM3، يكون اسم المظهر القابل للإنشاء MaterialTheme ولكن تختلف حزم الاستيراد والمعلمات:

import androidx.compose.material.MaterialTheme

MaterialTheme(
    colors = AppColors,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M2 content
}

import androidx.compose.material3.MaterialTheme

MaterialTheme(
    colorScheme = AppColorScheme,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M3 content
}

اللون

يختلف نظام الألوان في M3 بشكل كبير عن M2. زاد عدد معلمات الألوان، ولها أسماء مختلفة، ويتم تعيينها بشكل مختلف لمكونات M3. في Compose، ينطبق ذلك على الفئة M2 Colors والفئة M3 ColorScheme والدوال ذات الصلة:

import androidx.compose.material.lightColors
import androidx.compose.material.darkColors

val AppLightColors = lightColors(
    // M2 light Color parameters
)
val AppDarkColors = darkColors(
    // M2 dark Color parameters
)
val AppColors = if (darkTheme) {
    AppDarkColors
} else {
    AppLightColors
}

import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme

val AppLightColorScheme = lightColorScheme(
    // M3 light Color parameters
)
val AppDarkColorScheme = darkColorScheme(
    // M3 dark Color parameters
)
val AppColorScheme = if (darkTheme) {
    AppDarkColorScheme
} else {
    AppLightColorScheme
}

نظرًا للاختلافات الكبيرة بين نظامي الألوان M2 وM3، لا يمكن ربط معلَمات Color بطريقة معقولة. بدلاً من ذلك، استخدِم أداة إنشاء Material Theme Builder لإنشاء نظام ألوان M3. استخدم ألوان M2 كألوان مصدر "أساسية" في الأداة، والتي توسِّع الأداة إلى لوحات الدرجات اللونية التي يستخدمها نظام الألوان M3. يوصى بالتعيينات التالية كنقطة بداية:

يمكنك نسخ قيم الرموز السداسية العشرية للألوان للمظاهر الفاتحة والداكنة من الأداة واستخدامها لتنفيذ مثيل M3 ColorScheme. وبدلاً من ذلك، يمكن لأداة Material Theme Builder تصدير رمز Compose.

isLight

على عكس الفئة Colors M2، لا تتضمّن الفئة M3 ColorScheme مَعلمة isLight. بشكل عام، يجب أن تحاول تصميم كل ما يحتاج إلى هذه المعلومات على مستوى الموضوع. على سبيل المثال:

import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
import androidx.compose.material.MaterialTheme

@Composable
private fun AppTheme(
  darkTheme: Boolean = isSystemInDarkTheme(),
  content: @Composable () -> Unit
) {
  val colors = if (darkTheme) darkColors(…) else lightColors(…)
  MaterialTheme(
      colors = colors,
      content = content
  )
}

@Composable
fun AppComposable() {
    AppTheme {
        val cardElevation = if (MaterialTheme.colors.isLight) 0.dp else 4.dp
        …
    }
}

import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme

val LocalCardElevation = staticCompositionLocalOf { Dp.Unspecified }
@Composable
private fun AppTheme(
   darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
   val cardElevation = if (darkTheme) 4.dp else 0.dp
    CompositionLocalProvider(LocalCardElevation provides cardElevation) {
        val colorScheme = if (darkTheme) darkColorScheme(…) else lightColorScheme(…)
        MaterialTheme(
            colorScheme = colorScheme,
            content = content
        )
    }
}

@Composable
fun AppComposable() {
    AppTheme {
        val cardElevation = LocalCardElevation.current
        …
    }
}

اطّلع على أنظمة التصميم المخصّصة في دليل Compose للحصول على مزيد من المعلومات.

ألوان ديناميكية

هناك ميزة جديدة في الإصدار M3 هي اللون الديناميكي. بدلاً من استخدام ألوان مخصّصة، يمكن لـ ColorScheme M3 الاستفادة من ألوان خلفية الجهاز على Android 12 والإصدارات الأحدث، وذلك باستخدام الدوال التالية:

• dynamicLightColorScheme
• dynamicDarkColorScheme

أسلوب الخط

يختلف نظام الطباعة في M3 عن التصميم M2. عدد معلمات أسلوب الخط هو ذاته تقريبًا، لكن لها أسماء مختلفة وترتبط بشكل مختلف بمكونات M3. في Compose، ينطبق ذلك على الفئة M2 Typography والفئة M3 Typography:

import androidx.compose.material.Typography

val AppTypography = Typography(
    // M2 TextStyle parameters
)

import androidx.compose.material3.Typography

val AppTypography = Typography(
    // M3 TextStyle parameters
)

يُنصَح باستخدام عمليات ربط مَعلمات TextStyle التالية كنقطة بداية:

شكل

يختلف نظام الشكل في M3 عن M2. لقد زاد عدد معلمات الشكل، وتم تسميتها بشكل مختلف ويتم ربطها بشكل مختلف بمكونات M3. في Compose، ينطبق ذلك على الفئة M2 Shapes والفئة M3 Shapes:

import androidx.compose.material.Shapes

val AppShapes = Shapes(
    // M2 Shape parameters
)

import androidx.compose.material3.Shapes

val AppShapes = Shapes(
    // M3 Shape parameters
)

يُنصَح باستخدام عمليات ربط مَعلمات Shape التالية كنقطة بداية:

المكونات والتخطيطات

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

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

بينما تتطلب بعض المكوّنات اعتبارات خاصة، يُنصَح باستخدام عمليات ربط الدوال التالية كنقطة بداية:

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

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

واجهات برمجة التطبيقات التي تمت إعادة تسميتها:

جميع واجهات برمجة التطبيقات الأخرى:

يمكنك الاطّلاع على أحدث مكوّنات وتنسيقات M3 في نظرة عامة على مرجع واجهة برمجة التطبيقات Compose Material 3، وتابِع صفحة الإصدارات للاطّلاع على واجهات برمجة التطبيقات الجديدة والمحدّثة.

سقالة وأشرطة وجبات خفيفة ودرج تنقل

تختلف السقالة في M3 عن M2. في الإصدارَين M2 وM3، يكون اسم التنسيق الرئيسي القابل للإنشاء هو Scaffold، لكنّ حِزم الاستيراد والمَعلمات تختلف:

import androidx.compose.material.Scaffold

Scaffold(
    // M2 scaffold parameters
)

import androidx.compose.material3.Scaffold

Scaffold(
    // M3 scaffold parameters
)

تحتوي المَعلمة M2 Scaffold على المَعلمة backgroundColor، وقد تم تسميتها الآن باسم containerColor في M3 Scaffold:

import androidx.compose.material.Scaffold

Scaffold(
    backgroundColor = …,
    content = { … }
)

import androidx.compose.material3.Scaffold

Scaffold(
    containerColor = …,
    content = { … }
)

لم تعُد الفئة M2 ScaffoldState متوفّرة في M3 لأنّها تحتوي على مَعلمة drawerState لم تعُد ضرورية. لعرض أشرطة الوجبات الخفيفة مع M3 Scaffold، استخدِم SnackbarHostState بدلاً من ذلك:

import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    content = {
        …
        scope.launch {
            scaffoldState.snackbarHostState.showSnackbar(…)
        }
    }
)

import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    content = {
        …
        scope.launch {
            snackbarHostState.showSnackbar(…)
        }
    }
)

تمت إزالة جميع معلَمات drawer* من M2 Scaffold من M3 Scaffold. وتشمل هذه المعلَمات مثل drawerShape وdrawerContent. لعرض درج يتضمن Scaffold M3، استخدِم درج تنقُّل قابلاً للإنشاء، مثل ModalNavigationDrawer، بدلاً من ذلك:

import androidx.compose.material.DrawerValue
import
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState

val scaffoldState = rememberScaffoldState(
    drawerState = rememberDrawerState(DrawerValue.Closed)
)
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { … },
    drawerGesturesEnabled = …,
    drawerShape = …,
    drawerElevation = …,
    drawerBackgroundColor = …,
    drawerContentColor = …,
    drawerScrimColor = …,
    content = {
        …
        scope.launch {
            scaffoldState.drawerState.open()
        }
    }
)

import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet(
            drawerShape = …,
            drawerTonalElevation = …,
            drawerContainerColor = …,
            drawerContentColor = …,
            content = { … }
        )
    },
    gesturesEnabled = …,
    scrimColor = …,
    content = {
        Scaffold(
            content = {
                …
                scope.launch {
                    drawerState.open()
                }
            }
        )
    }
)

شريط التطبيق العلوي

تختلف أشرطة التطبيقات الأفضل في الإصدار M3 عن تلك في الإصدار M2. في كلا الإصدارين M2 وM3، يكون اسم شريط التطبيق العلوي القابل للإنشاء هو TopAppBar، لكن حزم الاستيراد والمعلمات تختلف:

import androidx.compose.material.TopAppBar

TopAppBar(…)

import androidx.compose.material3.TopAppBar

TopAppBar(…)

يمكنك استخدام M3 CenterAlignedTopAppBar إذا كنت ترتكز سابقًا على المحتوى ضمن M2 TopAppBar. من المفيد أيضًا الاطّلاع على MediumTopAppBar وLargeTopAppBar.

تحتوي أشرطة التطبيقات العليا M3 على مَعلمة scrollBehavior جديدة لتوفير وظائف مختلفة عند التنقّل في الفئة TopAppBarScrollBehavior، مثل تغيير المسقط الرأسي. يعمل ذلك بالتزامن مع تمرير المحتوى من خلال Modifer.nestedScroll. وقد كان ذلك ممكنًا في الإصدار M2 TopAppBar من خلال تغيير مَعلمة elevation يدويًا:

import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.TopAppBar

val state = rememberLazyListState()
val isAtTop by remember {
    derivedStateOf {
        state.firstVisibleItemIndex == 0 && state.firstVisibleItemScrollOffset == 0
    }
}

Scaffold(
    topBar = {
        TopAppBar(
            elevation = if (isAtTop) {
                0.dp
            } else {
                AppBarDefaults.TopAppBarElevation
            },
            …
        )
    },
    content = {
        LazyColumn(state = state) { … }
    }
)

import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            scrollBehavior = scrollBehavior,
            …
        )
    },
    content = {
        LazyColumn { … }
    }
)

شريط التنقل السفلي / شريط التنقل

تمت إعادة تسمية شريط التنقّل السفلي في M2 ليصبح شريط التنقّل في M3. في التصميم M2، هناك العنصران BottomNavigation وBottomNavigationItem القابلان للإنشاء، بينما في الإصدار M3 هناك العنصران NavigationBar وNavigationBarItem القابلَين للإنشاء:

import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem

BottomNavigation {
    BottomNavigationItem(…)
    BottomNavigationItem(…)
    BottomNavigationItem(…)
}

import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem

NavigationBar {
    NavigationBarItem(…)
    NavigationBarItem(…)
    NavigationBarItem(…)
}

الأزرار وأزرار الرموز وأزرار التحكم في الإجراءات (FAB)

تختلف الأزرار وأزرار الرموز وأزرار الإجراءات العائمة في الإصدار M3 عن تلك المتوفرة في الإصدار M2. يشمل التصميم M3 جميع عناصر الزر M2 القابلة للإنشاء:

import androidx.compose.material.Button
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.IconToggleButton
import androidx.compose.material.OutlinedButton
import androidx.compose.material.TextButton

// M2 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M2 icon buttons
IconButton(…)
IconToggleButton(…)
// M2 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)

import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.TextButton

// M3 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M3 icon buttons
IconButton(…)
IconToggleButton(…)
// M3 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)

يتضمن M3 أيضًا تباينات جديدة للأزرار. يمكنك الاطّلاع عليها في نظرة عامة على المراجع الخاصة بواجهة برمجة التطبيقات في Compose Material 3.

تبديل

يختلف التبديل في M3 عن الحساب M2. في الإصدارين M2 وM3، تتم تسمية مفتاح التحكّم القابل للإنشاء باسم Switch، لكنّ حزم الاستيراد تختلف:

import androidx.compose.material.Switch

Switch(…)

import androidx.compose.material3.Switch

Switch(…)

الأسطح والارتفاع

تختلف أنظمة السطح والارتفاع في M3 عن أنظمة التشغيل M2. هناك نوعان من الارتفاع في M3:

• ارتفاع الظل (لبث الظل، تمامًا مثل M2)
• ارتفاع الدرجة اللونية (يتراكب على لون، جديد على M3)

في Compose، ينطبق ذلك على الدالة M2 Surface والدالة M3 Surface:

import androidx.compose.material.Surface

Surface(
    elevation = …
) { … }

import androidx.compose.material3.Surface

Surface(
    shadowElevation = …,
    tonalElevation = …
) { … }

يمكنك استخدام قيم elevation Dp في M2 لكل من shadowElevation و/أو tonalElevation في M3، وفقًا لاختيار تصميم تجربة المستخدم وواجهة المستخدم. Surface هي النسخة الاحتياطية القابلة للإنشاء خلف معظم المكوّنات، لذلك قد تعرض العناصر القابلة للإنشاء أيضًا مَعلمات الارتفاع التي يجب نقلها بالطريقة نفسها.

يحل ارتفاع الدرجات اللونية في M3 محل مفهوم تراكبات الارتفاع في المظاهر الداكنة M2 . ونتيجةً لذلك، لا يتوفّر ElevationOverlay وLocalElevationOverlay في الإصدار M3، وتغيّر LocalAbsoluteElevation في الحساب M2 إلى LocalAbsoluteTonalElevation في الإصدار M3.

التوكيد والمحتوى ألفا

يختلف التوكيد في M3 اختلافًا كبيرًا عن M2. في التوكيد M2، ينطوي استخدام ألوان "تشغيل" مع قيم ألفا معينة للتمييز بين المحتوى مثل النص والأيقونات. في الإصدار M3، تتوفّر الآن طريقتان مختلفتان:

• استخدام ألوان "تشغيل" إلى جانب ألوان "خيار التشغيل" من نظام ألوان M3 الموسَّع.
• استخدام سُمك خط مختلفة للنص

نتيجةً لذلك، لا يتوفر ContentAlpha وLocalContentAlpha في M3 ويجب استبدالهما.

يُوصى بعمليات الربط التالية كنقطة بداية:

في ما يلي مثال على توكيد الرمز في M2 مقابل M3:

import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha

// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
    Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Icon(…)
}

import androidx.compose.material3.LocalContentColor

// High emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
    Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
    Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
    Icon(…)
}

في ما يلي مثال على التوكيد على النص في M2 مقابل M3:

import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha

// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
    Text(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Text(…)
}

import androidx.compose.material3.LocalContentColor

// High emphasis
Text(
    …,
    fontWeight = FontWeight.Bold
)
// Medium emphasis
Text(
    …,
    fontWeight = FontWeight.Normal
)
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
    Text(
        …,
        fontWeight = FontWeight.Normal
    )
}

الخلفيات والحاويات

تتم تسمية الخلفيات في الإصدار M2 باسم "الحاويات" في الإصدار M3. بشكل عام، يمكنك استبدال معلَمات background* في M2 بـ container* في M3 باستخدام القيم نفسها. على سبيل المثال:

Badge(
    backgroundColor = MaterialTheme.colors.primary
) { … }

Badge(
    containerColor = MaterialTheme.colorScheme.primary
) { … }

إمكانية التشغيل التفاعلي لمشاهدات

إذا كان تطبيقك يتضمّن "طُرق العرض" أو إمكانية التشغيل التفاعلي بتنسيق XML ويستخدم مكتبة MDC-Android Compose Theme Adapter، عليك استخدام الإصدار M3:

implementation "com.google.android.material:compose-theme-adapter:$compose-theme-adapter-version"

implementation "com.google.android.material:compose-theme-adapter-3:$compose-theme-adapter-3-version"

اطّلع على أحدث الإصدارات على صفحة إصدارات Compose Theme Adapter من MDC-Android.

يكمن الفرق الرئيسي بين الإصدارَين M2 وM3 في العنصرَين القابلَين للإنشاء MdcTheme وMdc3Theme:

import com.google.android.material.composethemeadapter.MdcTheme

MdcTheme {
    // M2 content
}

import com.google.android.material.composethemeadapter3.Mdc3Theme

Mdc3Theme {
    // M3 content
}

اطّلِع على الدليل التمهيدي لمعرفة مزيد من المعلومات.

يمكن الاطلاع على دليل النقل إلى التصميم المتعدد الأبعاد للحصول على مزيد من المعلومات حول الانتقال من المادة 2 إلى المادة 3 في طرق العرض.

روابط مفيدة

لمعرفة المزيد من المعلومات حول الانتقال من M2 إلى M3 في Compose، يمكنك الاطّلاع على المراجع الإضافية التالية.

مستندات Google

• التصميم المتعدد الأبعاد 3 في Compose

نماذج التطبيقات

• الرد على نموذج تطبيق M3
• نموذج نقل بيانات تطبيق Jetchat من M2 إلى M3
  • نقل البيانات الأولية إلى alpha01
  • متابعة تعديل alpha10
• نموذج تطبيق Jetnews من الإصدار M2 إلى M3
• نموذج من تطبيق Jetsurvey لنقل البيانات من الإصدار M2 إلى M3
• تتوفر الآن في الإصدار الرئيسي M3 من تطبيق Android :Core-designsystem (وحدة نظام التصميم الأساسي)

الفيديوهات الطويلة

• تطبيق Material You باستخدام Jetpack Compose

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

• إنشاء مرجع لواجهة برمجة التطبيقات Material 3
• إنشاء نماذج المادة 3 في رمز المصدر