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") } }
কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট
ফোকাস করা যায় এমন সারফেসের জন্য শেয়ার করা ইন্টার্যাকশন সোর্স:
.surface()ও.focusable()দু'টিকেই একইinteractionSourceশেয়ার করতে হবে। এর ফলে ফোকাস পরিবর্তন হলে সারফেস প্রতিক্রিয়া জানাতে পারে।ক্লিক করা যায় এমন সারফেসের জন্য শেয়ার করা ইন্টার্যাকশন সোর্স:
.surface()ও.clickable()দু'টিকেই একইinteractionSourceশেয়ার করতে হবে। এর ফলে ভিজ্যুয়াল স্টেট (যেমন, প্রেস বা ফোকাস) সিঙ্ক্রোনাইজ করা হয়, যার ফলে সারফেস ব্যবহারকারীর ইনপুটের ভিজ্যুয়াল প্রতিক্রিয়া জানাতে পারে।মডিফায়ার সাজানো: মডিফায়ারগুলির ক্রম অত্যন্ত গুরুত্বপূর্ণ। কারণ
.surface()লেআউট ক্লিপ করে, এটিকে আগে প্লেস করলে.clickable()নিশ্চিত করে যে টাচ টার্গেট সারফেসের আকারের মধ্যে সীমাবদ্ধ থাকে।.clickable()প্রথমে থাকলে, ইন্টার্যাকশন এরিয়া কম্পোনেন্টের দৃশ্যমান, ক্লিপ করা সীমার বাইরেও প্রসারিত হতে পারে।
SurfaceDepthEffect
SurfaceDepthEffect ক্লাস ইন্ট্যার্যাকশন স্টেটের মধ্যে
ছায়ার ট্রানজিশন ম্যানেজ করে:
depthEffect: সারফেস যখন ডিফল্ট অবস্থায় থাকে তখন ব্যবহৃত হয়।focusedDepthEffect: সারফেস ফোকাস করা হলে ব্যবহৃত শ্যাডো এফেক্ট।