জেটপ্যাক কম্পোজ গ্লিমারে পৃষ্ঠতল

প্রযোজ্য এক্সআর ডিভাইস

এই নির্দেশিকা আপনাকে এই ধরনের এক্সআর ডিভাইসগুলির জন্য অভিজ্ঞতা তৈরি করতে সাহায্য করে।

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

Jetpack Compose Glimmer-এ, surface কম্পোনেন্ট হলো একটি মৌলিক গঠন উপাদান যা বাটন এবং কার্ডের মতো কম্পোনেন্টগুলোর জন্য একটি স্বতন্ত্র দৃশ্যমান এলাকা বা ভৌত সীমানা উপস্থাপন করে।

একটি পৃষ্ঠতল নিম্নলিখিত দৃশ্যমান ও ভৌত বৈশিষ্ট্যগুলোর জন্য দায়ী:

• ক্লিপিং : এর চাইল্ডগুলোকে একটি নির্দিষ্ট আকারে ক্লিপ করে।
• বর্ডার : কম্পোনেন্টের সীমানাকে সুস্পষ্ট করতে একটি ভেতরের বর্ডার আঁকে। ফোকাস করা হলে, এটি একটি ফোকাসড হাইলাইটসহ আরও চওড়া বর্ডার তৈরি করে।
• পটভূমি : পৃষ্ঠতলে একটি পটভূমি রঙ প্রয়োগ করে।
• ডেপথ এফেক্টস : কম্পোনেন্টের অবস্থার (যেমন ডিফল্ট বনাম ফোকাসড) উপর ভিত্তি করে DepthEffect শ্যাডো রেন্ডার করে।
• কন্টেন্ট কালার : সারফেসের ভেতরের টেক্সট এবং আইকনগুলোর জন্য একটি রঙ নির্ধারণ করে, যা ডিফল্টভাবে ব্যাকগ্রাউন্ড কালার থেকে গণনা করা হয়।
• ইন্টারঅ্যাকশন স্টেট : পৃষ্ঠতলটি চাপ দিলে একটি চাপা ওভারলে তৈরি হয় এবং ফোকাস করা হলে হাইলাইট সহ একটি চওড়া বর্ডার তৈরি হয়।

উদাহরণ: একটি পৃষ্ঠ তৈরি করুন

নিম্নলিখিত কোডটি ক্লিপিং, একটি ব্যাকগ্রাউন্ড এবং ডিফল্ট বর্ডার সহ একটি সারফেস তৈরি করে:

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}
SurfaceSamples.kt

Interaction and Focus

Surfaces aren't focusable by default, so users can't interact with them. In most cases, surfaces should be interactive to let users consistently move focus and navigate between components. You can use the Compose focusable modifer for surfaces that are only intended to be focusable, or the Compose clickable modifer and other modifiers for surfaces that require actions.

You can create a focusable surface by combining a surface modifier with the focusable modifier:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to focusable to make sure that
                // surface appears focused when interacted with.
                interactionSource = interactionSource
            )
            .focusable(interactionSource = interactionSource)
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a focusable surface")
    }
}
SurfaceSamples.kt

Key points about the code

• Shared interaction source: Both .surface() and .focusable() must share the same interactionSource. This lets the surface react to focus changes.

Similarly, you can create a clickable surface:

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to clickable to make sure that
                // surface appears focused and pressed when interacted with
                interactionSource = interactionSource
            )
            .clickable(interactionSource = interactionSource, onClick = {})
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a clickable surface")
    }
}
SurfaceSamples.kt

কোড সম্পর্কে মূল বিষয়গুলো

• একই ইন্টারঅ্যাকশন সোর্স : surface() এবং clickable() উভয়কেই অবশ্যই একই interactionSource শেয়ার করতে হবে। এটি নিশ্চিত করে যে ভিজ্যুয়াল স্টেটগুলো (যেমন প্রেস বা ফোকাস) সিঙ্ক্রোনাইজড থাকে, যার ফলে সারফেস ব্যবহারকারীর ইনপুটের প্রতি দৃশ্যত প্রতিক্রিয়া দেখায়।

• মডিফায়ারের ক্রম : মডিফায়ারগুলোর অনুক্রম অত্যন্ত গুরুত্বপূর্ণ। যেহেতু surface() একটি লেআউটকে ক্লিপ করে, তাই এটিকে .clickable clickable() এর আগে রাখলে টাচ টার্গেটটি সারফেসের আকারের মধ্যেই সীমাবদ্ধ থাকে। যদি clickable() প্রথমে আসে, তাহলে ইন্টারঅ্যাকশন এলাকাটি কম্পোনেন্টের দৃশ্যমান, ক্লিপ করা সীমানার বাইরে চলে যেতে পারে।

পৃষ্ঠের গভীরতা প্রভাব

SurfaceDepthEffect ক্লাসটি বিভিন্ন ইন্টারঅ্যাকশন অবস্থার মধ্যে ছায়ার রূপান্তর পরিচালনা করে:

• depthEffect : পৃষ্ঠতলটি তার ডিফল্ট অবস্থায় থাকাকালীন ব্যবহৃত ছায়া প্রভাব।
• focusedDepthEffect : পৃষ্ঠতলটি ফোকাস করা হলে ব্যবহৃত ছায়া প্রভাব।