CompositionLocal-এর সাথে লোকালি স্কোপ করা ডেটা

CompositionLocal হল এমন একটি টুল যা কম্পোজিশনের মাধ্যমে ডেটা পাস করে। এই পৃষ্ঠায়, আপনি CompositionLocal কী তা আরও বিস্তারিতভাবে জানতে পারবেন, কীভাবে নিজের CompositionLocal তৈরি করতে হয় এবং আপনার ব্যবহারের ক্ষেত্রে CompositionLocal একটি ভালো সমাধান কিনা তা জানতে পারবেন।

CompositionLocal-এর ভূমিকা

সাধারণত, Compose-এ, UI ট্রি-এর মাধ্যমে প্রতিটি কম্পোজ করার উপযুক্ত ফাংশনে প্যারামিটার হিসেবে ডেটা নিচের দিকে ফ্লো করে। এর ফলে কোনও কম্পোজ করার মতো আইটেমের ডিপেন্ডেন্সি স্পষ্ট হয়ে যায়। তবে, কালার বা টাইপ স্টাইলের মতো খুব ঘনঘন ও ব্যাপকভাবে ব্যবহৃত ডেটার ক্ষেত্রে এটি অসুবিধাজনক হতে পারে। নিচে দেওয়া উদাহরণ দেখুন:

@Composable
fun MyApp() {
    // Theme information tends to be defined near the root of the application
    val colors = colors()
}

// Some composable deep in the hierarchy
@Composable
fun SomeTextLabel(labelText: String) {
    Text(
        text = labelText,
        color = colors.onPrimary // ← need to access colors here
    )
}
CompositionLocalSnippets.kt

বেশিরভাগ কম্পোজেবলকে এক্সপ্লিসিট প্যারামিটার ডিপেন্ডেন্সি হিসেবে কালার পাস করার প্রয়োজন নেই। এটি নিশ্চিত করতে, Compose CompositionLocal অফার করে, যা আপনাকে ট্রি-স্কোপড নামযুক্ত অবজেক্ট তৈরি করতে দেয়। এগুলি UI ট্রি-এর মাধ্যমে ডেটা ফ্লো করার জন্য ইমপ্লিসিট উপায় হিসেবে ব্যবহার করা যেতে পারে।

CompositionLocal এলিমেন্ট সাধারণত UI ট্রি-এর কোনও নির্দিষ্ট নোডে মান সহ প্রদান করা হয়। কম্পোজ করার উপযুক্ত ফাংশনে CompositionLocal প্যারামিটার হিসেবে ঘোষণা না করেই এর কম্পোজ করার উপযুক্ত ডিসেন্ডেন্টরা সেই ভ্যালু ব্যবহার করতে পারে।

গুরুত্বপূর্ণ শব্দ: এই নির্দেশিকায়, আমরা কম্পোজিশন, UI ট্রি এবং UI হায়ারার্কি শব্দগুলি ব্যবহার করেছি। অন্যান্য নির্দেশিকায় এগুলি পরিবর্তনযোগ্য হিসেবে ব্যবহার করা হলেও, এদের অর্থ আলাদা আলাদা:

• কম্পোজিশন হল কম্পোজ করা যায় এমন ফাংশনের কল গ্রাফের রেকর্ড।
• UI ট্রি বা UI হায়ারার্কি হল LayoutNode কম্পোজিশন প্রসেস দ্বারা কনস্ট্রাক্ট, আপডেট ও মেন্টেন করা ট্রি।

CompositionLocal হল Material থিম যা ব্যাকগ্রাউন্ডে ব্যবহার করে। MaterialTheme হল এমন একটি অবজেক্ট যা তিনটি CompositionLocal ইনস্ট্যান্স প্রদান করে: colorScheme, typography এবং shapes, যা আপনাকে কম্পোজিশনের যেকোনও ডিসেন্ডেন্ট পার্টে পরে সেগুলি রিট্রিভ করতে দেয়। বিশেষত, এগুলি হল LocalColorScheme, LocalShapes এবং LocalTypography প্রপার্টি যা আপনি MaterialTheme colorScheme, shapes এবং typography অ্যাট্রিবিউটের মাধ্যমে অ্যাক্সেস করতে পারবেন।

@Composable
fun MyApp() {
    // Provides a Theme whose values are propagated down its `content`
    MaterialTheme {
        // New values for colorScheme, typography, and shapes are available
        // in MaterialTheme's content lambda.

        // ... content here ...
    }
}

// Some composable deep in the hierarchy of MaterialTheme
@Composable
fun SomeTextLabel(labelText: String) {
    Text(
        text = labelText,
        // `primary` is obtained from MaterialTheme's
        // LocalColors CompositionLocal
        color = MaterialTheme.colorScheme.primary
    )
}
CompositionLocalSnippets.kt

CompositionLocal ইনস্ট্যান্স কম্পোজিশনের একটি অংশের মধ্যে সীমাবদ্ধ, তাই আপনি ট্রিয়ের বিভিন্ন লেভেলে আলাদা আলাদা ভ্যালু প্রদান করতে পারবেন। CompositionLocal-এর current ভ্যালু কম্পোজিশনের সেই অংশে পূর্বপুরুষের দেওয়া সবচেয়ে কাছাকাছি ভ্যালুর সাথে মিলে যায়।

CompositionLocal-এ নতুন ভ্যালু দিতে, এর provides ইনফিক্স ফাংশন ব্যবহার করুন, যা CompositionLocal কী-কে value-এর সাথে যুক্ত করে। CompositionLocalProvider CompositionLocal-এর current প্রপার্টি অ্যাক্সেস করার সময় CompositionLocalProvider-এর content ল্যাম্বডা প্রদত্ত ভ্যালু পাবে। নতুন ভ্যালু প্রদান করা হলে, কম্পোজিশনের সেইসব অংশ Compose আবার কম্পোজ করে যেগুলি CompositionLocal পড়ে।

এর একটি উদাহরণ হল, LocalContentColor CompositionLocal-এ টেক্সট ও আইকনোগ্রাফির জন্য পছন্দের কন্টেন্টের রঙ ব্যবহার করা হয়েছে যাতে তা বর্তমান ব্যাকগ্রাউন্ডের সাথে কনট্রাস্ট করে। নিচের উদাহরণে, কম্পোজিশনের বিভিন্ন অংশের জন্য আলাদা ভ্যালু প্রদান করতে CompositionLocalProvider ব্যবহার করা হয়েছে।

@Composable
fun CompositionLocalExample() {
    MaterialTheme {
        // Surface provides contentColorFor(MaterialTheme.colorScheme.surface) by default
        // This is to automatically make text and other content contrast to the background
        // correctly.
        Surface {
            Column {
                Text("Uses Surface's provided content color")
                CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.primary) {
                    Text("Primary color provided by LocalContentColor")
                    Text("This Text also uses primary as textColor")
                    CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.error) {
                        DescendantExample()
                    }
                }
            }
        }
    }
}

@Composable
fun DescendantExample() {
    // CompositionLocalProviders also work across composable functions
    Text("This Text uses the error color now")
}
CompositionLocalSnippets.kt

শেষের উদাহরণে, CompositionLocal ইনস্ট্যান্সগুলি Material composables-এর দ্বারা ইন্টার্নালি ব্যবহার করা হয়েছে। CompositionLocal-এর বর্তমান ভ্যালু অ্যাক্সেস করতে, এর current প্রপার্টি ব্যবহার করুন। নিম্নলিখিত উদাহরণে, Android অ্যাপে সাধারণত ব্যবহৃত LocalContext CompositionLocal-এর বর্তমান Context ভ্যালু টেক্সট ফর্ম্যাট করতে ব্যবহার করা হয়েছে:

@Composable
fun FruitText(fruitSize: Int) {
    // Get `resources` from the current value of LocalContext
    val resources = LocalContext.current.resources
    val fruitText = remember(resources, fruitSize) {
        resources.getQuantityString(R.plurals.fruit_title, fruitSize)
    }
    Text(text = fruitText)
}
CompositionLocalSnippets.kt

আপনার নিজস্ব CompositionLocal তৈরি করুন

CompositionLocal হল কম্পোজিশনের মাধ্যমে পরোক্ষভাবে ডেটা পাস করার একটি টুল।

CompositionLocal ব্যবহার করার আরেকটি গুরুত্বপূর্ণ সিগন্যাল হল, প্যারামিটারটি ক্রস-কাটিং এবং ইমপ্লিমেন্টেশনের ইন্টারমিডিয়েট লেয়ারের এটির অস্তিত্ব সম্পর্কে সচেতন হওয়া উচিত নয়, কারণ সেইসব ইন্টারমিডিয়েট লেয়ারকে সচেতন করে তুললে কম্পোজ করার উপযোগিতা সীমিত হয়ে যাবে। যেমন, Android-এর অনুমতির জন্য কোয়েরি করা CompositionLocal-এর মাধ্যমে গোপনে করা হয়। মিডিয়া পিকার কম্পোজ করার উপযুক্ত API পরিবর্তন না করেই ডিভাইসে অনুমতি-সুরক্ষিত কন্টেন্ট অ্যাক্সেস করার জন্য নতুন কার্যকারিতা যোগ করতে পারে এবং মিডিয়া পিকারের কলকারীদের এনভায়রনমেন্ট থেকে ব্যবহৃত এই যোগ করা প্রসঙ্গ সম্পর্কে সচেতন হতে হবে।

তবে, CompositionLocal সবসময় সেরা সমাধান নয়। আমরা CompositionLocal-এর অতিরিক্ত ব্যবহারকে অনুৎসাহিত করি কারণ এর কিছু অসুবিধা আছে:

CompositionLocal কম্পোজ করার উপযুক্ত আইটেমের আচরণ সম্পর্কে যুক্তি দেওয়া কঠিন করে তোলে। এগুলি পরোক্ষ নির্ভরতা তৈরি করে বলে, এগুলি ব্যবহার করে এমন কম্পোজ করার মতো ফাংশনের কলকারীদের নিশ্চিত করতে হবে যে প্রতিটি CompositionLocal-এর জন্য একটি ভ্যালু পূরণ করা হয়েছে।

এছাড়াও, এই নির্ভরতার জন্য কোনও স্পষ্ট সোর্স অফ ট্রুথ নাও থাকতে পারে কারণ এটি কম্পোজিশনের যেকোনও অংশে মিউটেট করতে পারে। তাই, কোনও সমস্যা হলে অ্যাপ ডিবাগ করা আরও কঠিন হতে পারে কারণ current ভ্যালু কোথায় দেওয়া হয়েছে তা দেখতে আপনাকে কম্পোজিশন পর্যন্ত নেভিগেট করতে হবে। IDE-তে ব্যবহার খুঁজুন বা Compose লেআউট ইন্সপেক্টরের মতো টুল এই সমস্যা কমানোর জন্য যথেষ্ট তথ্য প্রদান করে।

CompositionLocal ব্যবহার করবেন কিনা সেই ব্যাপারে সিদ্ধান্ত নিন

কিছু নির্দিষ্ট শর্ত পূরণ হলে, আপনার ব্যবহারের ক্ষেত্রে CompositionLocal একটি ভালো সমাধান হতে পারে:

CompositionLocal-এর একটি ভাল ডিফল্ট ভ্যালু থাকতে হবে। কোনও ডিফল্ট ভ্যালু না থাকলে, আপনাকে অবশ্যই গ্যারান্টি দিতে হবে যে কোনও ডেভেলপারের পক্ষে এমন পরিস্থিতিতে পড়া অত্যন্ত কঠিন যেখানে CompositionLocal-এর জন্য কোনও ভ্যালু প্রদান করা হয়নি। ডিফল্ট ভ্যালু না দিলে, টেস্ট তৈরি করার সময় বা কম্পোজ করার উপযুক্ত আইটেমের প্রিভিউ দেখার সময় সমস্যা হতে পারে। কারণ, সেটিতে CompositionLocal সবসময় এটি স্পষ্টভাবে প্রদান করতে হবে।

ট্রি-স্কোপ বা সাব-হায়ারার্কি স্কোপ হিসেবে বিবেচিত হয় না এমন কনসেপ্টের জন্য CompositionLocal এড়িয়ে চলুন। CompositionLocal তখনই যুক্তিযুক্ত হয় যখন সেটি সম্ভাব্যভাবে যেকোনও বংশধর ব্যবহার করতে পারে, কয়েকজনের দ্বারা নয়।

// LocalElevations.kt file

data class Elevations(val card: Dp = 0.dp, val default: Dp = 0.dp)

// Define a CompositionLocal global object with a default
// This instance can be accessed by all composables in the app
val LocalElevations = compositionLocalOf { Elevations() }
CompositionLocalSnippets.kt

// MyActivity.kt file

class MyActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            // Calculate elevations based on the system theme
            val elevations = if (isSystemInDarkTheme()) {
                Elevations(card = 1.dp, default = 1.dp)
            } else {
                Elevations(card = 0.dp, default = 0.dp)
            }

            // Bind elevation as the value for LocalElevations
            CompositionLocalProvider(LocalElevations provides elevations) {
                // ... Content goes here ...
                // This part of Composition will see the `elevations` instance
                // when accessing LocalElevations.current
            }
        }
    }
}
CompositionLocalSnippets.kt

@Composable
fun SomeComposable() {
    // Access the globally defined LocalElevations variable to get the
    // current Elevations in this part of the Composition
    MyCard(elevation = LocalElevations.current.card) {
        // Content
    }
}
CompositionLocalSnippets.kt

@Composable
fun MyComposable(myViewModel: MyViewModel = viewModel()) {
    // ...
    MyDescendant(myViewModel.data)
}

// Don't pass the whole object! Just what the descendant needs.
// Also, don't  pass the ViewModel as an implicit dependency using
// a CompositionLocal.
@Composable
fun MyDescendant(myViewModel: MyViewModel) { /* ... */ }

// Pass only what the descendant needs
@Composable
fun MyDescendant(data: DataToDisplay) {
    // Display data
}
CompositionLocalSnippets.kt

@Composable
fun MyComposable(myViewModel: MyViewModel = viewModel()) {
    // ...
    MyDescendant(myViewModel)
}

@Composable
fun MyDescendant(myViewModel: MyViewModel) {
    Button(onClick = { myViewModel.loadData() }) {
        Text("Load data")
    }
}
CompositionLocalSnippets.kt

@Composable
fun MyComposable(myViewModel: MyViewModel = viewModel()) {
    // ...
    ReusableLoadDataButton(
        onLoadClick = {
            myViewModel.loadData()
        }
    )
}

@Composable
fun ReusableLoadDataButton(onLoadClick: () -> Unit) {
    Button(onClick = onLoadClick) {
        Text("Load data")
    }
}
CompositionLocalSnippets.kt

@Composable
fun MyComposable(myViewModel: MyViewModel = viewModel()) {
    // ...
    ReusablePartOfTheScreen(
        content = {
            Button(
                onClick = {
                    myViewModel.loadData()
                }
            ) {
                Text("Confirm")
            }
        }
    )
}

@Composable
fun ReusablePartOfTheScreen(content: @Composable () -> Unit) {
    Column {
        // ...
        content()
    }
}
CompositionLocalSnippets.kt