Jetpack Compose-এ Box: এটি কী, composable বৈশিষ্ট্য এবং এটি কীভাবে কাজ করে

Jetpack Compose-এ Box কী?

Box হল একটি composable ফাংশন যা চাইল্ড এলিমেন্টগুলোকে একই এলাকায় রাখে, তাদের একে অপরের উপরে স্তুপীকরণ করে। প্রথম চাইল্ড এলিমেন্টটি নিচে ড্র হয়, শেষটি উপরে। ডিফল্টভাবে, Box সবচেয়ে বড় চাইল্ড এলিমেন্টের আকারে সামঞ্জস্য হয়।

Row এবং Column-এর বিপরীতে, Box এলিমেন্টগুলোকে ক্রমিকভাবে সাজায় না — সমস্ত চাইল্ড এলিমেন্ট একই এলাকা দখল করে এবং একে অপরকে ওভারল্যাপ করতে পারে। এটি Box-কে ইন্টারফেস লেয়ার তৈরির জন্য অপরিহার্য করে তোলে।

Box-এর আকার নিয়ম দ্বারা নির্ধারিত হয়: যদি কোনো চাইল্ড এলিমেন্টের নির্দিষ্ট আকার না থাকে, Box সর্বনিম্ন আকারে সঙ্কুচিত হয়। যদি অন্তত একটি চাইল্ড এলিমেন্টে Modifier.fillMaxSize থাকে, Box সর্বোচ্চ পর্যন্ত প্রসারিত হয়।

Android Developers Blog, 2024 অনুসারে, Box হল Compose-এ সবচেয়ে কার্যকরী কন্টেইনার সেই ক্ষেত্রগুলির জন্য যেখানে এলিমেন্টগুলোর ক্রমিক বিন্যাসের প্রয়োজন নেই। Box Row এবং Column-এর বিপরীতে, অবস্থান নির্ধারণের জন্য অতিরিক্ত পরিমাপ করে না।

Box-এর মৌলিক সিগনেচার

Box প্যারামিটার modifier, contentAlignment এবং propagateMinConstraints গ্রহণ করে। সমস্ত চাইল্ড এলিমেন্ট content ব্লকে পাস করা হয়, যেখানে প্রতিটির নিজস্ব মডিফায়ার থাকতে পারে।

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(200.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.fillMaxSize().background(Color.Blue)
        )
        Text(
            text = "হ্যালো",
            color = Color.White
        )
    }
}

Box-এ ContentAlignment এবং Modifier.align

contentAlignment হল Box-এর একটি প্যারামিটার যা সমস্ত চাইল্ড এলিমেন্টের জন্য ডিফল্ট সারিবদ্ধতা নির্ধারণ করে। যদি নির্দিষ্ট না করা হয়, Alignment.TopStart ব্যবহার করা হয় — এলিমেন্টগুলো কন্টেইনারের উপরের-বাম কোণায় রাখা হয়।

Modifier.align একটি নির্দিষ্ট চাইল্ড এলিমেন্টের জন্য contentAlignment থেকে স্বাধীনভাবে সারিবদ্ধতা ওভাররাইড করার অনুমতি দেয়। উদাহরণস্বরূপ, Alignment.Center সহ একটি Box Modifier.align(Alignment.BottomEnd) সহ একটি এলিমেন্ট ধারণ করতে পারে যা নিচের-ডান কোণায় স্থির থাকবে।

Material Design Guidelines, 2025 অনুসারে, Modifier.align ব্যাকগ্রাউন্ড ইমেজের উপর ব্যাজ এবং আইকনের অবস্থান নির্ধারণের জন্য উপযোগী। এটি Box-এর সমস্ত বিষয়বস্তুর জন্য সাধারণ সারিবদ্ধতা নির্ধারণ এবং পৃথক এলিমেন্টের জন্য এটি ওভাররাইড করার অনুমতি দেয়।

Alignment মানের সারণী

Modifier.align-এর সাথে উদাহরণ

এই উদাহরণে, Box-এ একটি ব্যাকগ্রাউন্ড ইমেজ এবং নিচের-ডান কোণায় একটি ব্যাজ রয়েছে। Modifier.align(BottomEnd) ব্যাজটিকে Box-এর contentAlignment থেকে স্বাধীনভাবে অবস্থান করে।

@Composable
fun BadgeExample() {
    Box(
        modifier = Modifier.size(120.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.size(100.dp).background(Color.Gray)
        )
        Box(
            modifier = Modifier
                .size(30.dp)
                .align(Alignment.BottomEnd)
                .background(Color.Red, CircleShape)
        )
    }
}

zIndex-এর সাথে লেয়ার ব্যবস্থাপনা

Modifier.zIndex Box-এর ভিতরে এলিমেন্টের ড্র অর্ডার নিয়ন্ত্রণ করে। ডিফল্টভাবে, এলিমেন্টগুলো ঘোষণা ক্রমে ড্র হয় — প্রথম এলিমেন্ট নিচে, শেষটি উপরে। zIndex এই ক্রম ওভাররাইড করে।

zIndex 2.0f সহ একটি এলিমেন্ট zIndex 1.0f সহ এলিমেন্টের উপরে ড্র হয়, কোডে তাদের ক্রম নির্বিশেষে। ঋণাত্মক zIndex মান এলিমেন্টটিকে অন্যদের নিচে রাখে। Android Developers, 2024 অনুসারে, zIndex শুধুমাত্র ড্র অর্ডারকে প্রভাবিত করে, টাচ ইভেন্ট হ্যান্ডলিংকে নয়।

zIndex বিশেষ করে অ্যানিমেশন এবং ড্র্যাগেবল কম্পোনেন্টে উপযোগী, যেখানে একটি এলিমেন্টকে অস্থায়ীভাবে অন্যদের উপরে উঠতে হয়। উদাহরণস্বরূপ, একটি কার্ড টেনে আনার সময়, এর zIndex বৃদ্ধি পায় যাতে এটি প্রতিবেশী এলিমেন্ট দ্বারা ঢাকা না পড়ে।

@Composable
fun ZIndexExample() {
    Box(modifier = Modifier.size(150.dp)) {
        Box(modifier = Modifier.size(80.dp)
            .align(Alignment.TopStart)
            .zIndex(2.0f)
            .background(Color.Green))
        Box(modifier = Modifier.size(100.dp)
            .align(Alignment.Center)
            .zIndex(1.0f)
            .background(Color.Blue))
    }
}

Box ব্যবহারের ব্যবহারিক উদাহরণ

Box ব্যাপকভাবে ইমেজের উপর টেক্সট ওভারলে করতে ব্যবহৃত হয়। ব্যাকগ্রাউন্ড ইমেজ প্রথমে রাখা হয়, তারপর ব্যাকগ্রাউন্ডের উপর অবস্থানের জন্য Modifier.align সহ টেক্সট রাখা হয়।

@Composable
fun ImageWithOverlay() {
    Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
        Image(
            painter = painterResource(R.drawable.photo),
            contentDescription = "Photo",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        Box(
            modifier = Modifier.fillMaxSize()
                .background(Color.Black.copy(alpha = 0.4f))
        )
        Text(
            text = "শিরোনাম",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

দ্বিতীয় উদাহরণটি হল লোডিং ইন্ডিকেটর তৈরির জন্য Box। Box পুরো স্ক্রীন এলাকা দখল করে, এবং CircularProgressIndicator contentAlignment-এর মাধ্যমে কেন্দ্রীভূত হয়।

@Composable
fun LoadingOverlay() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(48.dp)
        )
    }
}

Box-এর আকারের সীমাবদ্ধতা

Box ডিফল্টভাবে তার বিষয়বস্তুর আকারে সামঞ্জস্য হয়। যদি চাইল্ড এলিমেন্টের বিভিন্ন আকার থাকে, Box সবচেয়ে বড় এলিমেন্টের আকার নেয়। যখন কোনো চাইল্ড এলিমেন্ট নেই, Box সর্বনিম্ন আকারে সঙ্কুচিত হয়।

Modifier.clipToBounds চাইল্ড এলিমেন্টের রেন্ডারিং Box-এর সীমানার মধ্যে সীমাবদ্ধ করে। এই মডিফায়ার ছাড়া, চাইল্ড এলিমেন্ট Box-এর বাইরে বিস্তৃত হতে পারে। Material Design Guidelines, 2025 অনুসারে, Box-এর ভিতরে Modifier.scale বা Modifier.graphicsLayer ব্যবহার করার সময় clipToBounds বাধ্যতামূলক।

propagateMinConstraints হল Box-এর একটি প্যারামিটার যা ন্যূনতম আকারের সীমাবদ্ধতা চাইল্ড এলিমেন্টে প্রেরণ করে। true-তে সেট করা হলে, চাইল্ড এলিমেন্টগুলি Modifier.size বা Modifier.constrain-এর মাধ্যমে Box-এর জন্য নির্ধারিত ন্যূনতম আকারের চেয়ে ছোট হতে পারে না।

• Box — ন্যূনতম কন্টেইনার যদি কোনো আকার নির্ধারিত না থাকে এবং কোনো চাইল্ড এলিমেন্ট fillMaxSize সহ না থাকে
• Modifier.clipToBounds বিষয়বস্তুকে Box-এর সীমানার বাইরে যেতে বাধা দেয়
• propagateMinConstraints চাইল্ড এলিমেন্টে ন্যূনতম সীমাবদ্ধতা প্রেরণ করে