इस पेज का अनुवाद Cloud Translation API से किया गया है.

Wear OS के लिए Compose में, Material 2.5 से Material 3 पर माइग्रेट करना

मटीरियल 3 एक्सप्रेसिव, मटीरियल डिज़ाइन का अगला वर्शन है. इसमें अपडेट की गई थीम, कॉम्पोनेंट, और मनमुताबिक़ बनाने की सुविधाएँ शामिल हैं. जैसे, डाइनैमिक कलर.

इस गाइड में, ऐप्लिकेशन के लिए 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")

Wear Compose Material 3 की रिलीज़ के पेज पर जाकर, M3 के नए वर्शन देखें.

Wear Compose Foundation लाइब्रेरी के वर्शन 1.6.0-alpha03 में, कुछ नए कॉम्पोनेंट जोड़े गए हैं. इन्हें Material 3 कॉम्पोनेंट के साथ काम करने के लिए डिज़ाइन किया गया है. इसी तरह, Wear OS 6 (एपीआई लेवल 36) या इसके बाद के वर्शन पर चलने वाले डिवाइसों में, Wear Compose Navigation लाइब्रेरी के SwipeDismissableNavHost में अपडेट किया गया ऐनिमेशन दिखता है. 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
)

फ़्लेक्स फ़ॉन्ट

फ़्लेक्स फ़ॉन्ट की मदद से डिज़ाइनर, किसी खास साइज़ के लिए टाइप की चौड़ाई और मोटाई तय कर सकते हैं.

टेक्स्ट स्टाइल

M3 में ये TextStyles उपलब्ध हैं. इनका इस्तेमाल 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 कॉम्पोनेंट से अलग-अलग तरीके से मैप होते हैं. ये शेप साइज़ उपलब्ध हैं:

ज़्यादा छोटा
छोटा
मध्यम
बड़ा
ज़्यादा बड़ा

Compose में, यह 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
)

शुरुआत करने के लिए, Compose में Material 2 से Material 3 पर माइग्रेट करें लेख में दी गई, शेप पैरामीटर मैपिंग का इस्तेमाल करें.

शेप मॉर्फ़िंग

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 के कॉम्पोनेंट की तुलना में ज़्यादा वेरिएशन होते हैं.

कुछ कॉम्पोनेंट के लिए खास बातों का ध्यान रखना ज़रूरी होता है. हालांकि, शुरुआत में इन फ़ंक्शन मैपिंग का इस्तेमाल करने का सुझाव दिया जाता है:

मटेरियल 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	इसे हटा दिया गया है, क्योंकि Material 3 में `Text` या `Icon` इसका इस्तेमाल नहीं करते
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	इसे Wear OS के लिए, मटीरियल 3 एक्सप्रेसिव डिज़ाइन में शामिल नहीं किया गया है, इसलिए इसे हटा दिया गया है

यहां 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 (with 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 (with 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 OS के लिए खास तौर पर बनाए गए सुधार शामिल हैं. इससे परफ़ॉर्मेंस बेहतर होती है और Wear OS के दिशा-निर्देशों का पालन किया जाता है.
androidx.compose.foundation.pager.VerticalPager	यह वर्टिकल स्क्रोलिंग वाला पेजर है. इसे Compose Foundation कॉम्पोनेंट पर बनाया गया है. इसमें Wear OS के लिए खास तौर पर तैयार की गई सुविधाएं जोड़ी गई हैं, ताकि परफ़ॉर्मेंस को बेहतर बनाया जा सके और 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 में बटन के नए वैरिएशन भी शामिल हैं. इन्हें Compose Material 3 API के बारे में खास जानकारी में देखें.

M3 में एक नया बटन जोड़ा गया है: EdgeButton. EdgeButton चार अलग-अलग साइज़ में उपलब्ध है: बहुत छोटा, छोटा, मीडियम, और बड़ा. EdgeButton लागू करने के तरीके के आधार पर, साइज़ के हिसाब से maxLines के लिए डिफ़ॉल्ट वैल्यू दी जाती है. हालांकि, इसे अपनी ज़रूरत के हिसाब से बदला जा सकता है.

अगर TransformingLazyColumn और ScalingLazyColumn का इस्तेमाल किया जा रहा है, तो EdgeButton को ScreenScaffold में पास करें, ताकि यह बदल जाए और स्क्रोल करने पर इसका आकार बदल जाए. ScreenScaffold के साथ ScreenScaffold और TransformingLazyColumn का इस्तेमाल करने का तरीका जानने के लिए, यहां दिया गया कोड देखें.EdgeButton

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 में, 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

अगर HorizontalPagerIndicator के साथ HorizontalPager का इस्तेमाल किया जा रहा है, तो HorizontalPagerScaffold पर माइग्रेट किया जा सकता है. HorizontalPagerScaffold को AppScaffold में रखा गया है. AppScaffold और HorizontalPagerScaffold, पेज पर मौजूद कॉन्टेंट को व्यवस्थित करने के लिए इस्तेमाल किए जाते हैं. साथ ही, ये 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	M3
`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

काम के लिंक

Compose में M2.5 से M3 पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, यहां दिए गए अतिरिक्त संसाधन देखें.

सैंपल

एपीआई का रेफ़रंस और सोर्स कोड

डिज़ाइन

डिज़ाइन से जुड़े दिशा-निर्देश