דף זה תורגם על ידי 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, ובמיוחד:

תלויות

ל-M3 יש חבילה וגרסה נפרדות מ-M2.5:

M2.5

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

M3

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 כולל הנפשה מעודכנת כשמריצים אותו ב-Wear OS 6 (רמת API‏ 36) ומעלה. כשמעדכנים לגרסה Wear Compose Material 3, מומלץ לעדכן גם את הספריות 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
)

M3

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
)

M3

import androidx.wear.compose.material3.ColorScheme

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

בטבלה הבאה מפורטים ההבדלים העיקריים בין M2.5 לבין M3:

M2.5	M3
`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
)

M3

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

גופנים של Flex

גופנים גמישים מאפשרים למעצבים לציין את רוחב ומשקל הגופן עבור גדלים ספציפיים.

סגנונות טקסט

ב-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. מספר הפרמטרים של הצורה גדל, השמות שלהם שונים והמיפוי שלהם לרכיבי M3 שונה. אלה הגדלים של הצורות שזמינים:

קטן במיוחד
קטן
בינוני
גדול
גדול במיוחד

במצב כתיבה, זה רלוונטי למחלקות M2 Shapes ולמחלקות M3 Shapes:

M2.5

import androidx.wear.compose.material.Shapes

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

M3

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 (אם הוא לא חדש ב-M3)
androidx.wear.compose.material3.AlertDialog	androidx.wear.compose.material.dialog.Alert
androidx.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	רכיב pager עם גלילה אופקית, שמבוסס על רכיבי Compose Foundation עם שיפורים ספציפיים ל-Wear כדי לשפר את הביצועים ולעמוד בהנחיות של Wear OS.
androidx.compose.foundation.pager.VerticalPager	רכיב pager עם גלילה אנכית, שמבוסס על רכיבי Compose Foundation עם שיפורים ספציפיים ל-Wear כדי לשפר את הביצועים ולעמוד בהנחיות של Wear OS.
androidx.wear.foundation.lazy.TransformingLazyColumn	אפשר להשתמש במאפיין הזה במקום במאפיין `ScalingLazyColumn` כדי להוסיף לכל פריט אפקטים של שינוי צורה בזמן גלילה.

לחצנים

הלחצנים ב-M3 שונים מאלה שב-M2.5. הצ'יפ M2.5 הוחלף בלחצן. הטמעה של Button מספקת ערכי ברירת מחדל למאפיינים Text, maxLines ו-textAlign. אפשר לשנות את ערכי ברירת המחדל האלה ברכיב Text.

M2.5

import androidx.wear.compose.material.Chip

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

M3

import androidx.wear.compose.material3.Button

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

בנוסף, M3 כולל וריאציות חדשות של לחצנים. אפשר לעיין בהם בסקירה הכללית של הפניית API של Compose Material 3.

ב-M3 מוצג כפתור חדש: EdgeButton. המוצר EdgeButton זמין ב-4 מידות שונות: אקסטרה סמול, סמול, מדיום ולרג'. ההטמעה של 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
   }
}

פיגום

ה-Scaffold ב-M3 שונה מזה שב-M2.5. ב-M3, ‏ AppScaffold ורכיב ה-ScreenScaffold החדש שניתן להרכבה החליפו את Scaffold. הרכיבים AppScaffold ו-ScreenScaffold מגדירים את המבנה של המסך ומתאמים את המעברים של הרכיבים ScrollIndicator ו-TimeText.

‫AppScaffold מאפשרת לרכיבים סטטיים במסך, כמו TimeText, להישאר גלויים במהלך מעברים בתוך האפליקציה, כמו החלקה לסגירה. היא מספקת משבצת לתוכן האפליקציה הראשי, שבדרך כלל מסופק על ידי רכיב ניווט כמו SwipeDismissableNavHost

מצהירים על AppScaffold אחד לפעילות ומשתמשים ב-ScreenScaffold לכל מסך.

M2.5

import androidx.wear.compose.material.Scaffold

Scaffold {...}

M3

    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 {
        …
   }
}

Placeholder

יש כמה שינויים ב-API בין M2.5 ל-M3. Placeholder.PlaceholderDefaults כולל עכשיו שני משנים:

‫Modifier.placeholder, שמוצג במקום תוכן שעדיין לא נטען
אפקט נצנוץ של placeholder‏ Modifier.placeholderShimmer שפועל בלולאת אנימציה בזמן ההמתנה לטעינת הנתונים.

בטבלה הבאה מפורטים שינויים נוספים ברכיב Placeholder.

M2.5	M3
`PlaceholderState.startPlaceholderAnimation`	הוסר
`PlaceholderState.placeholderProgression`	הוסר
`PlaceholderState.isShowContent`	השם החדש הוא `!PlaceholderState.isVisible`
`PlaceholderState.isWipeOff`	הוסר
`PlaceholderDefaults.painterWithPlaceholderOverlayBackgroundBrush`	הוסר
`PlaceholderDefaults.placeholderBackgroundBrush`	הוסר
`PlaceholderDefaults.placeholderChipColors`	הוסר

SwipeDismissableNavHost

‫SwipeDismissableNavHost הוא חלק מwear.compose.navigation. כשמשתמשים ברכיב הזה עם M3, ‏ MaterialTheme של M3 מעדכן את 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

קישורים שימושיים

כדי לקבל מידע נוסף על מעבר מ-M2.5 ל-M3 ב-Compose, אפשר לעיין במקורות המידע הנוספים הבאים.

טעימות

הפניית API וקוד מקור

עיצוב

הנחיות לעיצוב

מעבר מ-Material 2.5 ל-Material 3 ב-Compose ל-Wear OS קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

גישות

תלויות

M2.5

M3

עיצוב

M2.5

M3

צבע

M2.5

M3

עיצוב של צבע דינמי

טיפוגרפיה

M2.5

M3

גופנים של Flex

סגנונות טקסט

צורה

M2.5

M3

שינוי צורה

רכיבים ופריסה

לחצנים

M2.5

M3

פיגום

M2.5

M3

Placeholder

SwipeDismissableNavHost

TransformingLazyColumn

קישורים שימושיים

טעימות

הפניית API וקוד מקור

עיצוב

מעבר מ-Material 2.5 ל-Material 3 ב-Compose ל-Wear OS