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

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

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

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

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

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

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

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

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

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

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

মিথস্ক্রিয়া এবং মনোযোগ

সারফেসগুলো ডিফল্টভাবে ফোকাসযোগ্য নয়, তাই ব্যবহারকারীরা সেগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারেন না। বেশিরভাগ ক্ষেত্রে, সারফেসগুলো ইন্টারেক্টিভ হওয়া উচিত যাতে ব্যবহারকারীরা ধারাবাহিকভাবে ফোকাস সরাতে এবং কম্পোনেন্টগুলোর মধ্যে নেভিগেট করতে পারেন। যে সারফেসগুলো শুধুমাত্র ফোকাসযোগ্য করার উদ্দেশ্যে তৈরি, সেগুলোর জন্য আপনি Compose focusable মডিফায়ারটি ব্যবহার করতে পারেন। একইভাবে, আপনি Compose clickable মডিফায়ার ব্যবহার করে একটি ক্লিকযোগ্য সারফেস তৈরি করতে পারেন। এছাড়াও, যে সারফেসগুলোতে অ্যাকশনের প্রয়োজন হয়, সেগুলোর জন্য আপনি অন্যান্য মডিফায়ারও ব্যবহার করতে পারেন।

নিম্নলিখিত কোডটিতে ফোকাসযোগ্য এবং ক্লিকযোগ্য উভয় প্রকার পৃষ্ঠতলের উদাহরণ দেখানো হয়েছে:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource),
        contentAlignment = Alignment.Center
    ) {
        Text("Focusable")
    }
}

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource)
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) { /* Handle click action */ },
        contentAlignment = Alignment.Center
    ) {
        Text("Clickable")
    }
}
SurfaceSamples.kt

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

• ফোকাসযোগ্য সারফেসের জন্য একই ইন্টারঅ্যাকশন সোর্স : .surface() এবং .focusable() উভয়েরই একই interactionSource থাকতে হবে। এর ফলে সারফেসটি ফোকাস পরিবর্তনে প্রতিক্রিয়া জানাতে পারে।

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

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

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

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

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