تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

نقل البيانات من Material 2.5 إلى Material 3 في تطبيق Compose لنظام التشغيل Wear OS

‫Material 3 Expressive هو التطوّر التالي في Material Design. يتضمّن هذا الإصدار ميزات محدّثة للتصميم والمكوّنات والتخصيص، مثل الألوان الديناميكية.

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

الأساليب

لترحيل رمز تطبيقك من M2.5 إلى M3، اتّبِع الأسلوب نفسه الموضّح في دليل ترحيل Compose Material على الهاتف، وخاصةً:

يجب عدم استخدام كل من M2.5 وM3 في تطبيق واحد على المدى الطويل
اتّبِع نهجًا تدريجيًا

التبعيات

يحتوي M3 على حزمة وإصدار منفصلَين عن M2.5:

M2.5

implementation("androidx.wear.compose:compose-material:1.4.0")

التصميم 3

implementation("androidx.wear.compose:compose-material3:1.6.0-alpha03")

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

قدّم الإصدار 1.6.0-alpha03 من مكتبة Wear Compose Foundation بعض المكوّنات الجديدة المصمّمة للعمل مع مكوّنات Material 3. وبالمثل، يتضمّن الرمز SwipeDismissableNavHost من مكتبة Wear Compose Navigation رسمًا متحركًا معدَّلاً عند تشغيله على الإصدار 6 من نظام التشغيل Wear OS (المستوى 36 لواجهة برمجة التطبيقات) أو الإصدارات الأحدث. عند التحديث إلى إصدار Material 3 من Wear Compose، ننصحك أيضًا بتحديث مكتبتَي Wear Compose Foundation وNavigation:

implementation("androidx.wear.compose:compose-foundation:1.6.0-alpha03")
implementation("androidx.wear.compose:compose-navigation:1.6.0-alpha03")

المظهر

في كلّ من M2.5 وM3، يُطلق على العنصر القابل للإنشاء الخاص بالمظهر الاسم MaterialTheme، ولكن تختلف حِزم الاستيراد والمَعلمات. في الإصدار M3، تم تغيير اسم المَعلمة Colors إلى ColorScheme، وتمت إضافة MotionScheme لتنفيذ عمليات الانتقال.

M2.5

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
        colors = AppColors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
)

التصميم 3

import androidx.wear.compose.material3.MaterialTheme

MaterialTheme(
        colorScheme = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

اللون

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

M2.5

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

التصميم 3

import androidx.wear.compose.material3.ColorScheme

val appColorScheme: ColorScheme = ColorScheme(
   // M3 ColorScheme parameters
)

يوضّح الجدول التالي الاختلافات الرئيسية بين الإصدارَين M2.5 وM3:

M2.5	التصميم 3
`Color`	تمت إعادة تسمية `ColorScheme`
‫13 لونًا	28 لونًا
لا ينطبق	ميزة جديدة لتطبيق مظهر الألوان الديناميكية
لا ينطبق	ألوان ثانوية جديدة للتعبير بشكل أفضل

تطبيق مظهر "الألوان الديناميكية"

تتضمّن M3 ميزة جديدة هي سمات الألوان الديناميكية. إذا غيّر المستخدمون ألوان خلفية شاشة الساعة، ستتغيّر الألوان في واجهة المستخدم لتتطابق معها.

استخدِم الدالة dynamicColorScheme لتنفيذ نظام ألوان ديناميكي وتوفير defaultColorScheme كخيار احتياطي في حال عدم توفّر نظام الألوان الديناميكي.

@Composable
fun myApp() {
  val myColorScheme = myBrandColors()
  val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
  MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}

أسلوب الخط

يختلف نظام الطباعة في M3 عن M2 ويتضمّن الميزات التالية:

تسعة أنماط نص جديدة
الخطوط المرنة التي تتيح تخصيص مقاييس الخطوط لأوزان وعرض واستدارة مختلفة
‫AnimatedText، الذي يستخدم خطوطًا مرنة

M2.5

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

التصميم 3

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

خطوط مرنة

تتيح الخطوط المرنة للمصمّمين تحديد عرض الخط ووزنه لأحجام معيّنة.

أنماط النص

تتوفّر TextStyles التالية في M3. يتم استخدام هذه الميزات تلقائيًا من خلال العديد من مكونات M3.

أسلوب الخط	TextStyle
الشاشة	displayLarge وdisplayMedium وdisplaySmall
العنوان	titleLarge وtitleMedium وtitleSmall
التصنيف	labelLarge وlabelMedium وlabelSmall
الجسم	bodyLarge وbodyMedium وbodySmall وbodyExtraSmall
الرقم	numeralExtraLarge, numeralLarge, numeralMedium, numeralSmall, numeralExtraSmall
قوس	arcLarge, arcMedium, arcSmall

الشكل

يختلف نظام الأشكال في M3 عن M2. زاد عدد مَعلمات الأشكال، وأصبحت أسماؤها مختلفة، كما أنّها ترتبط بشكل مختلف بمكوّنات Material Design 3. تتوفّر أحجام الأشكال التالية:

صغير جدًا
صغير
متوسط
كبير
كبيرة جدًا

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

M2.5

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

التصميم 3

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
   // M3 Shapes parameters
)

استخدِم عملية ربط مَعلمات الأشكال من نقل البيانات من Material 2 إلى Material 3 في Compose كنقطة بداية.

تغيير شكل الكائن

تقدّم M3 ميزة "تغيير الشكل": تتغيّر الأشكال الآن استجابةً للتفاعلات.

يتوفّر سلوك "تغيير الشكل" كصيغة لعدد من الأزرار الدائرية، ويمكنك الاطّلاع على قائمة الأزرار التالية التي تتيح ميزة "تغيير الشكل":

الأزرار	دالة تغيير الشكل
`IconButton`	تعمل الدالة IconButtonDefaults.animatedShape() على تحريك زر الرمز عند الضغط عليه
`IconToggleButton`	تعمل الدالة IconToggleButtonDefaults.animatedShape() على تحريك زر تبديل الرمز عند الضغط عليه و تعمل الدالة IconToggleButtonDefaults.variantAnimatedShapes() على تحريك زر تبديل الرمز عند الضغط عليه وعند وضع علامة اختيار أو إزالتها.
`TextButton`	تعمل الدالة TextButtonDefaults.animatedShape() على تحريك زر النص عند الضغط عليه
`TextToggleButton`	تعمل الدالة TextToggleButtonDefaults.animatedShapes() على تحريك زر التبديل النصي عند الضغط عليه، بينما تعمل الدالة TextToggleButtonDefaults.variantAnimatedShapes() على تحريك زر التبديل النصي عند الضغط عليه وعند وضع علامة اختيار أو إزالتها.

المكوّنات والتنسيق

تتوفّر معظم المكوّنات والتصاميم من M2.5 في M3. ومع ذلك، لم تكن بعض مكوّنات وتنسيقات M3 متوفّرة في M2.5. بالإضافة إلى ذلك، تتضمّن بعض مكوّنات M3 خيارات أكثر من تلك المتوفّرة في M2.5.

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

Material 2.5	Material 3
androidx.wear.compose.material.dialog.Alert	androidx.wear.compose.material3.AlertDialog
androidx.wear.compose.material.Button	‫androidx.wear.compose.material3.IconButton أو androidx.wear.compose.material3.TextButton
androidx.wear.compose.material.Card	androidx.wear.compose.material3.Card
androidx.wear.compose.material.TitleCard	androidx.wear.compose.material3.TitleCard
androidx.wear.compose.material.AppCard	androidx.wear.compose.material3.AppCard
androidx.wear.compose.material.Checkbox	لا يوجد مكافئ M3، لذا عليك الانتقال إلى androidx.wear.compose.material3.CheckboxButton أو androidx.wear.compose.material3.SplitCheckboxButton
androidx.wear.compose.material.Chip	‫androidx.wear.compose.material3.Button أو androidx.wear.compose.material3.OutlinedButton أو androidx.wear.compose.material3.FilledTonalButton أو androidx.wear.compose.material3.ChildButton
androidx.wear.compose.material.CompactChip	androidx.wear.compose.material3.CompactButton
androidx.wear.compose.material.InlineSlider	androidx.wear.compose.material3.Slider
androidx.wear.compose.material.LocalContentAlpha	تمت إزالة هذه السمة لأنّها غير مستخدَمة في `Text` أو `Icon` في Material 3
androidx.wear.compose.material.PositionIndicator	androidx.wear.compose.material3.ScrollIndicator
androidx.wear.compose.material.RadioButton	لا يوجد عنصر مطابق لـ M3، لذا عليك الانتقال إلى androidx.wear.compose.material3.RadioButton أو androidx.wear.compose.material3.SplitRadioButton
androidx.wear.compose.material.SwipeToRevealCard	androidx.wear.compose.material3.SwipeToReveal
androidx.wear.compose.material.SwipeToRevealChip	androidx.wear.compose.material3.SwipeToReveal
android.wear.compose.material.Scaffold	‫androidx.wear.compose material3.AppScaffold وandroidx.wear.compose.material3.ScreenScaffold
androidx.wear.compose.material.SplitToggleChip	لا يوجد عنصر M3 مكافئ، يمكنك الانتقال إلى androidx.wear.compose.material3.SplitCheckboxButton أو androidx.wear.compose.material3.SplitSwitchButton أو androidx.wear.compose.material3.SplitRadioButton
androidx.wear.compose.material.Switch	لا يوجد عنصر مطابق لـ M3، لذا عليك الانتقال إلى androidx.wear.compose.material3.SwitchButton أو androidx.wear.compose.material3.SplitSwitchButton
androidx.wear.compose.material.ToggleButton	‫androidx.wear.compose.material3.IconToggleButton أو androidx.wear.compose.material3.TextToggleButton
androidx.wear.compose.material.ToggleChip	‫androidx.wear.compose.material3.CheckboxButton أو androidx.wear.compose.material3.RadioButton أو androidx.wear.compose.material3.SwitchButton
androidx.wear.compose.material.Vignette	تمت إزالة هذا العنصر لأنّه غير مضمّن في تصميم Material 3 Expressive لنظام التشغيل Wear OS

في ما يلي قائمة كاملة بجميع عناصر Material 3:

Material 3	مكوّن مكافئ لإصدار Material 2.5 (إذا لم يكن جديدًا في الإصدار 3 من Material)
androidx.wear.compose.material3.AlertDialog	androidx.wear.compose.material.dialog.Alert
androix.wear.compose.material3.AnimatedPage	جديد
androidx.wear.compose.material3.AnimatedText	جديد
androidx.wear.compose material3.AppScaffold	android.wear.compose.material.Scaffold (مع androidx.wear.compose.material3.ScreenScaffold )
androidx.wear.compose.material3.Button	androidx.wear.compose.material.Chip
androidx.wear.compose.material3.ButtonGroup	جديد
androidx.wear.compose.material3.Card	androidx.wear.compose.material.Card
androidx.wear.compose.material3.CheckboxButton	‫androidx.wear.compose.material.ToggleChip مع عنصر تحكّم في تبديل مربع الاختيار
androidx.wear.compose.material3.ChildButton	‫androidx.wear.compose.material.Chip (عندما لا تكون الخلفية مطلوبة فقط)
androidx.wear.compose.material3.CircularProgressIndicator	androidx.wear.compose.material.CircularProgressIndicator
androidx.wear.compose.material3.CompactButton	androidx.wear.compose.material.CompactChip
androidx.wear.compose.material3.ConfirmationDialog	androidx.wear.compose.material.dialog.Confirmation
androidx.wear.compose.material3.curvedText	androidx.wear.compose.material.curvedText
androidx.wear.compose.material3.DatePicker	جديد
androidx.wear.compose.material3.Dialog	androidx.wear.compose.material.dialog.Dialog
androidx.wear.compose.material3.EdgeButton	جديد
androidx.wear.compose.material3.FadingExpandingLabel	جديد
androidx.wear.compose.material3.FilledTonalButton	‫androidx.wear.compose.material.Chip عند الحاجة إلى خلفية زر بلون مميز
androidx.wear.compose.material3.HorizontalPageIndicator	androidx.wear.compose.material.HorizontalPageIndicator
androidx.wear.compose.material3.HorizontalPagerScaffold	جديد
androidx.wear.compose.material3.Icon	androidx.wear.compose.material.Icon
androidx.wear.compose.material3.IconButton	androidx.wear.compose.material.Button
androidx.wear.compose.material3.IconToggleButton	androidx.wear.compose.material.ToggleButton
androidx.wear.compose.material3.LevelIndicator	جديد
androidx.wear.compose.material3.LinearProgressIndicator	جديد
androidx.wear.compose.material3.ListHeader	androidx.wear.compose.material.ListHeader
androidx.wear.compose.material3.ListSubHeader	جديد
androidx.wear.compose.material3.MaterialTheme	androidx.wear.compose.material.MaterialTheme
androidx.wear.compose.material3.OpenOnPhoneDialog	جديد
androidx.wear.compose.material3.Picker	androidx.wear.compose.material.Picker
androidx.wear.compose.material3.PickerGroup	androidx.wear.compose.material.PickerGroup
androix.wear.compose.material3.RadioButton	androidx.wear.compose.material.ToggleChip مع زر اختيار للتبديل
androidx.wear.compose.material3.ScreenScaffold	‫android.wear.compose.material.Scaffold (مع androidx.wear.compose material3.AppScaffold)
androidx.wear.compose.material3.ScrollIndicator	androidx.wear.compose.material.PositionIndicator
androidx.wear.compose.material3.scrollaway	androidx.wear.compose.material.scrollaway
androidx.wear.compose.material3.SegmentedCircularProgressIndicator	جديد
androidx.wear.compose.material3.Slider	androidx.wear.compose.material.InlineSlider
androidx.wear.compose.material3.SplitRadioButton	androidx.wear.compose.material.SplitToggleChip
androidx.wear.compose.material3.SplitCheckboxButton	androidx.wear.compose.material.SplitToggleChip
androidx.wear.compose.material3.SplitSwitchButton	androidx.wear.compose.material.SplitToggleChip
androidx.wear.compose.material3.Stepper	androidx.wear.compose.material.Stepper
androidx.wear.compose.material3.SwipeToDismissBox	androidx.wear.compose.material.SwipeToDismissBox
androidx.wear.compose.material3.SwipeToReveal	‫androidx.wear.compose.material.SwipeToRevealCard وandroidx.wear.compose.material.SwipeToRevealChip
androidx.wear.compose.material3.SwitchButton	‫androidx.wear.compose.material.ToggleChip مع عنصر تحكّم في مفتاح التبديل
androidx.wear.compose.material3.Text	androidx.wear.compose.material.Text
androidx.wear.compose.material3.TextButton	androidx.wear.compose.material.Button
androidx.wear.compose.material3.TextToggleButton	androidx.wear.compose.material.ToggleButton
androidx.wear.compose.material3.TimeText	androidx.wear.compose.material.TimeText
androidx.wear.compose.material3.VerticalPagerScaffold	جديد

وأخيرًا، إليك قائمة ببعض المكوّنات ذات الصلة من مكتبة Wear Compose Foundation التي تم طرحها لأول مرة في الإصدار 1.6.0-alpha03:

‫Wear Compose Foundation 1.6.0-alpha03
androidx.wear.compose.foundation.hierarchicalFocusGroup	يُستخدَم لإضافة تعليقات توضيحية إلى العناصر القابلة للإنشاء في أحد التطبيقات، وذلك لتتبُّع الجزء النشط من التركيب وتنسيق التركيز.
androidx.compose.foundation.pager.HorizontalPager	أداة عرض صفحات قابلة للتمرير أفقيًا، تم إنشاؤها باستخدام مكوّنات Compose Foundation مع تحسينات خاصة بنظام التشغيل Wear لتحسين الأداء والالتزام بإرشادات Wear OS.
androidx.compose.foundation.pager.VerticalPager	أداة عرض صفحات قابلة للتمرير عموديًا، تم إنشاؤها استنادًا إلى مكوّنات Compose Foundation مع تحسينات خاصة بنظام التشغيل Wear لتحسين الأداء والالتزام بإرشادات Wear OS.
androidx.wear.foundation.lazy.TransformingLazyColumn	يمكن استخدامها بدلاً من `ScalingLazyColumn` لإضافة تأثيرات تحويل التمرير إلى كل عنصر.

الأزرار

تختلف الأزرار في M3 عن M2.5. تم استبدال شريحة M2.5 بـ Button. يوفر تنفيذ Button قيمًا تلقائية لكل من Text وmaxLines وtextAlign. يمكن تجاهل هذه القيم التلقائية في العنصر Text.

M2.5

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

التصميم 3

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

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

تقدّم لك "الإصدار 3 من Material" زرًا جديدًا: EdgeButton. يتوفّر المنتج EdgeButton بأربعة مقاسات مختلفة: صغير جدًا وصغير ومتوسط وكبير. يوفّر تنفيذ EdgeButton قيمة تلقائية لـ maxLines استنادًا إلى الحجم، ويمكن تخصيص هذه القيمة.

إذا كنت تستخدم TransformingLazyColumn وScalingLazyColumn، مرِّر EdgeButton إلى ScreenScaffold ليتم تحويله وتغيير شكله عند التمرير. راجِع الرمز التالي لمعرفة كيفية استخدام EdgeButton مع ScreenScaffold وTransformingLazyColumn.

import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold

ScreenScaffold(
   scrollState = state,
   contentPadding = contentPadding,
   edgeButton = {
      EdgeButton(...)
   }
){ contentPadding ->
   TransformingLazyColumn(state = state, contentPadding = contentPadding,){
   // additional code here
   }
}

سقالة

يختلف التصميم الأساسي في M3 عن التصميم الأساسي في M2.5. في M3، تم استبدال Scaffold بـ AppScaffold وScreenScaffold الجديد القابل للإنشاء. تحدّد AppScaffold وScreenScaffold بنية الشاشة وتنسّق عمليات الانتقال بين المكوّنين ScrollIndicator وTimeText.

تسمح AppScaffold ببقاء عناصر الشاشة الثابتة، مثل TimeText، مرئية أثناء عمليات الانتقال داخل التطبيق، مثل التمرير سريعًا لإغلاق الشاشة. يوفر هذا العنصر مساحة لعرض المحتوى الرئيسي للتطبيق، والذي سيتم توفيره عادةً من خلال أحد مكونات التنقل، مثل SwipeDismissableNavHost

عليك تعريف AppScaffold واحد للنشاط واستخدام ScreenScaffold لكل شاشة.

M2.5

import androidx.wear.compose.material.Scaffold

Scaffold {...}

التصميم 3

    AppScaffold {
        val navController = rememberSwipeDismissableNavController()
        SwipeDismissableNavHost(
            navController = navController,
            startDestination = "message_list"
        ) {
            composable("message_list") {
                MessageList(onMessageClick = { id ->
                    navController.navigate("message_detail/$id")
                })
            }
            composable("message_detail/{id}") {
                MessageDetail(id = it.arguments?.getString("id")!!)
            }
        }
    }
}

// Implementation of one of the screens in the navigation
@Composable
fun MessageDetail(id: String) {
    // .. Screen level content goes here
    val scrollState = rememberTransformingLazyColumnState()

    val padding = rememberResponsiveColumnPadding(
        first = ColumnItemType.BodyText
    )

    ScreenScaffold(
        scrollState = scrollState,
        contentPadding = padding
    ) { scaffoldPaddingValues ->
        // Screen content goes here
        // ...Navigation.kt

إذا كنت تستخدم HorizontalPager مع HorizontalPagerIndicator، يمكنك الانتقال إلى HorizontalPagerScaffold. يتم وضع HorizontalPagerScaffold ضمن AppScaffold. تحدّد السمتان AppScaffold وHorizontalPagerScaffold بنية Pager وتنسّقان عمليات الانتقال بين المكوّنين HorizontalPageIndicator وTimeText.

تعرض HorizontalPagerScaffold HorizontalPageIndicator في منتصف أسفل الشاشة تلقائيًا، وتنسّق عرض TimeText وHorizontalPageIndicator وإخفائهما وفقًا لما إذا كان يتم تقسيم Pager إلى صفحات، ويتم تحديد ذلك من خلال PagerState.

يتوفّر أيضًا مكوّن AnimatedPage جديد، وهو يعرض صفحة متحركة ضمن Pager مع تأثير التوسيع والتعتيم استنادًا إلى موضعها.

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })
    val columnState = rememberTransformingLazyColumnState()
    val contentPadding = rememberResponsiveColumnPadding(
        first = ColumnItemType.ListHeader,
        last = ColumnItemType.BodyText,
    )
    HorizontalPagerScaffold(pagerState = pagerState) {
        HorizontalPager(
            state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold(
                    scrollState = columnState,
                    contentPadding = contentPadding
                ) { contentPadding ->
                    TransformingLazyColumn(
                        state = columnState,
                        contentPadding = contentPadding
                    ) {
                        item {
                            ListHeader(
                                modifier = Modifier.fillMaxWidth()
                            ) {
                                Text(text = "Pager sample")
                            }
                        }
                        item {
                            if (page == 0) {
                                Text(text = "Page #$page. Swipe right")
                            }
                            else{
                                Text(text = "Page #$page. Swipe left and right")
                            }
                        }
                    }
                }

            }
        }
    }
}Pager.kt

أخيرًا، تقدّم M3 VerticalPagerScaffold الذي يتّبع النمط نفسه الذي يتّبعه HorizontalPagerScaffold:

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
   val pagerState = rememberPagerState(pageCount = { 10 })

   VerticalPagerScaffold(pagerState = pagerState) {
      VerticalPager(
         state = pagerState
      ) { page ->
             AnimatedPage(pageIndex = page, pagerState = pagerState){
                ScreenScaffold {
        …
   }
}

عنصر نائب

هناك بعض التغييرات في واجهة برمجة التطبيقات بين الإصدارين M2.5 وM3. توفّر Placeholder.PlaceholderDefaults الآن معدِّلَين:

Modifier.placeholder، الذي يتم عرضه بدلاً من المحتوى الذي لم يتم تحميله بعد
تأثير التموّج في العنصر النائب Modifier.placeholderShimmer الذي يوفّر تأثير التموّج في العنصر النائب الذي يتم تشغيله في حلقة صور متحركة أثناء انتظار تحميل البيانات.

اطّلِع على الجدول التالي لمعرفة التغييرات الإضافية التي تم إجراؤها على مكوّن Placeholder.

M2.5	التصميم 3
`PlaceholderState.startPlaceholderAnimation`	تمت إزالتها
`PlaceholderState.placeholderProgression`	تمت إزالتها
`PlaceholderState.isShowContent`	تمت إعادة تسميته إلى `!PlaceholderState.isVisible`
`PlaceholderState.isWipeOff`	تمت إزالتها
`PlaceholderDefaults.painterWithPlaceholderOverlayBackgroundBrush`	تمت إزالته
`PlaceholderDefaults.placeholderBackgroundBrush`	تمت إزالتها
`PlaceholderDefaults.placeholderChipColors`	تمت إزالتها

SwipeDismissableNavHost

‫SwipeDismissableNavHost هو جزء من wear.compose.navigation. عند استخدام هذا المكوّن مع M3، يحدّث M3 MaterialTheme السمتَين LocalSwipeToDismissBackgroundScrimColor وLocalSwipeToDismissContentScrimColor.

TransformingLazyColumn

تشكّل السمة TransformingLazyColumn جزءًا من السمة wear.compose.lazy.foundation وتتيح إمكانية تغيير حجم الصور المتحركة وتعديلها في عناصر القائمة أثناء التمرير، ما يؤدي إلى تحسين تجربة المستخدم.

على غرار ScalingLazyColumn، يوفّر rememberTransformingLazyColumnState() لإنشاء TransformingLazyColumnState يتم تذكّره في جميع عمليات الإنشاء.

لإضافة رسوم متحركة لتغيير الحجم وتشويه الشكل، أضِف ما يلي إلى كل عنصر من عناصر القائمة:

Modifier.transformedHeight، الذي يتيح لك احتساب الارتفاع المحوَّل للعناصر باستخدام TransformationSpec، يمكنك استخدام rememberTransformationSpec() ما لم تكن بحاجة إلى المزيد من التخصيص.
‫SurfaceTransformation

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}List.kt

روابط مفيدة

لمزيد من المعلومات حول نقل البيانات من الإصدار 2.5 إلى الإصدار 3 من Material Design في Compose، يُرجى الاطّلاع على المراجع الإضافية التالية.

نماذج

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

التصميم

إرشادات التصميم

نقل البيانات من Material 2.5 إلى Material 3 في تطبيق Compose لنظام التشغيل Wear OS تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

الأساليب

التبعيات

M2.5

التصميم 3

المظهر

M2.5

التصميم 3

اللون

M2.5

التصميم 3

تطبيق مظهر "الألوان الديناميكية"

أسلوب الخط

M2.5

التصميم 3

خطوط مرنة

أنماط النص

الشكل

M2.5

التصميم 3

تغيير شكل الكائن

المكوّنات والتنسيق

الأزرار

M2.5

التصميم 3

سقالة

M2.5

التصميم 3

عنصر نائب

SwipeDismissableNavHost

TransformingLazyColumn

روابط مفيدة

نماذج

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

التصميم

نقل البيانات من Material 2.5 إلى Material 3 في تطبيق Compose لنظام التشغيل Wear OS