এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

রচনায় ফ্লো লেআউট

FlowRow এবং FlowColumn হল কম্পোজেবল যেগুলি Row এবং Column মত, কিন্তু কন্টেইনারের স্থান ফুরিয়ে গেলে পরবর্তী লাইনে প্রবাহিত আইটেমগুলির মধ্যে পার্থক্য রয়েছে। এটি একাধিক সারি বা কলাম তৈরি করে। maxItemsInEachRow বা maxItemsInEachColumn সেট করেও একটি লাইনে আইটেমের সংখ্যা নিয়ন্ত্রণ করা যেতে পারে। প্রতিক্রিয়াশীল লেআউট তৈরি করতে আপনি প্রায়শই FlowRow এবং FlowColumn ব্যবহার করতে পারেন— আইটেমগুলি এক মাত্রার জন্য খুব বড় হলে বিষয়বস্তু কাটা যাবে না এবং Modifier.weight(weight) এর সাথে maxItemsInEach* এর সংমিশ্রণ ব্যবহার করে এমন লেআউট তৈরি করতে সাহায্য করতে পারে যা প্রয়োজনের সময় সারি বা কলামের প্রস্থ পূর্ণ/প্রসারিত করে।

সাধারণ উদাহরণ হল একটি চিপ বা ফিল্টারিং UI এর জন্য:

একটি ফ্লোরোতে 5টি চিপ, যখন নেই তখন পরবর্তী লাইনে ওভারফ্লো দেখাচ্ছে৷ আরো স্থান উপলব্ধ। — **চিত্র 1.** `FlowRow` এর উদাহরণ

মৌলিক ব্যবহার

FlowRow বা FlowColumn ব্যবহার করতে, এই কম্পোজেবলগুলি তৈরি করুন এবং এর ভিতরে আইটেমগুলি রাখুন যা আদর্শ প্রবাহ অনুসরণ করবে:

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}FlowLayoutSnippets.kt

এই স্নিপেটটি উপরে দেখানো UI-তে পরিণত হয়, প্রথম সারিতে আর জায়গা না থাকলে আইটেমগুলি স্বয়ংক্রিয়ভাবে পরবর্তী সারিতে চলে যায়।

প্রবাহ বিন্যাসের বৈশিষ্ট্য

ফ্লো লেআউটে নিম্নলিখিত বৈশিষ্ট্য এবং বৈশিষ্ট্য রয়েছে যা আপনি আপনার অ্যাপে বিভিন্ন লেআউট তৈরি করতে ব্যবহার করতে পারেন।

প্রধান অক্ষ বিন্যাস: অনুভূমিক বা উল্লম্ব বিন্যাস

প্রধান অক্ষ হল সেই অক্ষ যার উপর আইটেমগুলি রাখা হয় (উদাহরণস্বরূপ, FlowRow তে, আইটেমগুলি অনুভূমিকভাবে সাজানো হয়)। FlowRow এ horizontalArrangement বিন্যাস পরামিতি আইটেমগুলির মধ্যে ফাঁকা স্থান কীভাবে বিতরণ করা হয় তা নিয়ন্ত্রণ করে।

নিম্নলিখিত টেবিলটি FlowRow এর জন্য আইটেমগুলিতে horizontalArrangement সেট করার উদাহরণ দেখায়:

`FlowRow` এ অনুভূমিক বিন্যাস সেট করা হয়েছে	ফলাফল
`Arrangement.Start` ( `Default` )
`Arrangement.SpaceBetween`
`Arrangement.Center`
`Arrangement.End`
`Arrangement.SpaceAround`
`Arrangement.spacedBy(8.dp)`

FlowColumn এর জন্য, অনুরূপ বিকল্পগুলি verticalArrangement সাথে, Arrangement.Top এর ডিফল্ট সহ উপলব্ধ।

ক্রস অক্ষ বিন্যাস

ক্রস অক্ষ হল মূল অক্ষের বিপরীত দিকের অক্ষ। উদাহরণস্বরূপ, FlowRow তে, এটি উল্লম্ব অক্ষ। পাত্রের ভিতরের সামগ্রিক বিষয়বস্তুগুলি ক্রস অক্ষে কীভাবে সাজানো হয় তা পরিবর্তন করতে, FlowRow জন্য verticalArrangement এবং FlowColumn জন্য horizontalArrangement ব্যবহার করুন।

FlowRow এর জন্য, নিম্নলিখিত টেবিলটি আইটেমগুলিতে বিভিন্ন verticalArrangement সেট করার উদাহরণ দেখায়:

`FlowRow` উল্লম্ব বিন্যাস সেট করা হয়েছে	ফলাফল
`Arrangement.Top` ( `Default` )
`Arrangement.Bottom`
`Arrangement.Center`

FlowColumn জন্য, horizontalArrangement সাথে অনুরূপ বিকল্পগুলি উপলব্ধ। ডিফল্ট ক্রস অক্ষ বিন্যাস হল Arrangement.Start ।

স্বতন্ত্র আইটেম প্রান্তিককরণ

আপনি বিভিন্ন প্রান্তিককরণের সাথে সারির মধ্যে পৃথক আইটেমগুলিকে অবস্থান করতে চাইতে পারেন। এটি verticalArrangement এবং horizontalArrangement থেকে ভিন্ন কারণ এটি বর্তমান লাইনের মধ্যে আইটেমগুলিকে সারিবদ্ধ করে। আপনি Modifier.align() দিয়ে এটি প্রয়োগ করতে পারেন।

উদাহরণস্বরূপ, যখন একটি FlowRow এর আইটেমগুলি বিভিন্ন উচ্চতার হয়, তখন সারিটি সবচেয়ে বড় আইটেমের উচ্চতা নেয় এবং আইটেমগুলিতে Modifier.align(alignmentOption) প্রয়োগ করে:

`FlowRow` উল্লম্ব প্রান্তিককরণ সেট করা হয়েছে	ফলাফল
`Alignment.Top` ( `Default` )
`Alignment.Bottom`
`Alignment.CenterVertically`

FlowColumn এর জন্য, অনুরূপ বিকল্প উপলব্ধ। ডিফল্ট প্রান্তিককরণ হল Alignment.Start ।

সারি বা কলামে সর্বাধিক আইটেম

maxItemsInEachRow বা maxItemsInEachColumn পরামিতিগুলি প্রধান অক্ষের সর্বাধিক আইটেমগুলিকে সংজ্ঞায়িত করে যাতে পরেরটিতে মোড়ানোর আগে একটি লাইনে অনুমতি দেওয়া যায়৷ ডিফল্ট হল Int.MAX_INT , যা যতটা সম্ভব আইটেমকে অনুমতি দেয়, যতক্ষণ না তাদের মাপগুলি লাইনে ফিট করার অনুমতি দেয়৷

উদাহরণস্বরূপ, একটি maxItemsInEachRow সেট করা প্রাথমিক লেআউটকে শুধুমাত্র 3টি আইটেম থাকতে বাধ্য করে:

সর্বোচ্চ সেট নেই	`maxItemsInEachRow = 3`

আইটেম ওজন

ওজন একটি আইটেমের ফ্যাক্টর এবং এটি যে লাইনে স্থাপন করা হয়েছিল তার উপর উপলব্ধ স্থানের উপর ভিত্তি করে বৃদ্ধি পায়। গুরুত্বপূর্ণভাবে, একটি আইটেমের প্রস্থ গণনা করতে ওজন কীভাবে ব্যবহার করা হয় তার সাথে FlowRow এবং Row মধ্যে পার্থক্য রয়েছে। Rows জন্য, ওজন Row সমস্ত আইটেমের উপর ভিত্তি করে। FlowRow এর সাথে, ওজন সেই লাইনের আইটেমগুলির উপর ভিত্তি করে যেখানে একটি আইটেম রাখা হয়েছে , FlowRow পাত্রে থাকা সমস্ত আইটেম নয়।

উদাহরণস্বরূপ, যদি আপনার কাছে 4 টি আইটেম থাকে যেগুলি সবগুলি একটি লাইনে পড়ে, প্রতিটির 1f, 2f, 1f এবং 3f এর বিভিন্ন ওজন থাকে, মোট ওজন হবে 7f । সারি বা কলামের অবশিষ্ট স্থান 7f দ্বারা ভাগ করা হবে। তারপর, প্রতিটি আইটেমের প্রস্থ ব্যবহার করে গণনা করা হবে: weight * (remainingSpace / totalWeight) ।

আপনি একটি গ্রিড-সদৃশ বিন্যাস তৈরি করতে FlowRow বা FlowColumn সাথে Modifier.weight এবং সর্বাধিক আইটেমগুলির সংমিশ্রণ ব্যবহার করতে পারেন। এই পদ্ধতিটি প্রতিক্রিয়াশীল লেআউট তৈরি করার জন্য দরকারী যা আপনার ডিভাইসের আকারের সাথে সামঞ্জস্য করে।

ওজন ব্যবহার করে আপনি কী অর্জন করতে পারেন তার কয়েকটি ভিন্ন উদাহরণ রয়েছে। একটি উদাহরণ হল একটি গ্রিড যেখানে আইটেমগুলি সমান আকারের হয়, যেমনটি নীচে দেখানো হয়েছে:

ফ্লো সারি দিয়ে গ্রিড তৈরি করা হয়েছে — **চিত্র 2.** একটি গ্রিড তৈরি করতে `FlowRow` ব্যবহার করে

সমান আইটেম আকারের একটি গ্রিড তৈরি করতে, আপনি নিম্নলিখিতগুলি করতে পারেন:

val rows = 3
val columns = 3
FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = rows
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .weight(1f)
        .clip(RoundedCornerShape(8.dp))
        .background(MaterialColors.Blue200)
    repeat(rows * columns) {
        Spacer(modifier = itemModifier)
    }
}FlowLayoutSnippets.kt

গুরুত্বপূর্ণভাবে, আপনি যদি অন্য একটি আইটেম যোগ করেন এবং 9 এর পরিবর্তে 10 বার পুনরাবৃত্তি করেন, শেষ আইটেমটি সম্পূর্ণ শেষ কলামটি নেয়, কারণ পুরো সারির মোট ওজন হল 1f :

গ্রিডে পূর্ণ আকারের শেষ আইটেম — **চিত্র 3.** শেষ আইটেমটি সম্পূর্ণ প্রস্থ নিয়ে একটি গ্রিড তৈরি করতে `FlowRow` ব্যবহার করে

আপনি অন্যান্য Modifiers সাথে ওজন একত্রিত করতে পারেন যেমন Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) , অথবা Modifier.fillMaxWidth(fraction) । এই মডিফায়ারগুলি একটি FlowRow (বা FlowColumn ) এর মধ্যে আইটেমগুলির প্রতিক্রিয়াশীল আকারের অনুমতি দেওয়ার জন্য একযোগে কাজ করে।

আপনি বিভিন্ন আইটেম আকারের একটি বিকল্প গ্রিডও তৈরি করতে পারেন, যেখানে দুটি আইটেম প্রতিটি অর্ধেক প্রস্থ নেয় এবং একটি আইটেম পরবর্তী কলামের সম্পূর্ণ প্রস্থ নেয়:

প্রবাহ সারি সহ বিকল্প গ্রিড — **চিত্র 4.** সারিগুলির পর্যায়ক্রমে মাপ সহ `FlowRow`

আপনি নিম্নলিখিত কোড দিয়ে এটি অর্জন করতে পারেন:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 2
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(Color.Blue)
    repeat(6) { item ->
        // if the item is the third item, don't use weight modifier, but rather fillMaxWidth
        if ((item + 1) % 3 == 0) {
            Spacer(modifier = itemModifier.fillMaxWidth())
        } else {
            Spacer(modifier = itemModifier.weight(0.5f))
        }
    }
}FlowLayoutSnippets.kt

ভগ্নাংশ মাপ

Modifier.fillMaxWidth(fraction) ব্যবহার করে, আপনি একটি আইটেম গ্রহণ করা উচিত এমন ধারকটির আকার নির্দিষ্ট করতে পারেন। এটি Row বা Column প্রয়োগ করার সময় Modifier.fillMaxWidth(fraction) কীভাবে কাজ করে তার থেকে ভিন্ন, সেই Row/Column আইটেমগুলি পুরো কন্টেইনারের প্রস্থের পরিবর্তে অবশিষ্ট প্রস্থের শতাংশ নেয়।

উদাহরণস্বরূপ, FlowRow বনাম Row ব্যবহার করার সময় নিম্নলিখিত কোড বিভিন্ন ফলাফল তৈরি করে:

   )                    }FlowRow( modifier = Modifier.padding(4.dp), horizontalArrangement = Arrangement.spacedBy(4.dp), maxItemsInEachRow = 3 class="devsite-syntax-w"> { val itemModifier = Modifier .clip(RoundedCornerShape(8.dp)) Box( modifier = itemModifier .height(200.dp) .width(60.dp) .background(Color.Red) ) Box( modifier = itemModifier .height(200.dp) .fillMaxWidth(0.7f) .background(Color.Blue) ) Box( modifier = itemModifier .height(200.dp) .weight(1f) .background(Color.Magenta) ) class="devsite-github-link nocode no-select">FlowLayoutSnippets.kt

`FlowRow` : পুরো কন্টেইনার প্রস্থের 0.7 ভগ্নাংশ সহ মধ্যম আইটেম।
`Row` : মধ্য আইটেম বাকি `Row` প্রস্থের 0.7 শতাংশ নেয়৷

`fillMaxColumnWidth()` এবং `fillMaxRowHeight()`

একটি FlowColumn বা FlowRow ভিতরের একটি আইটেমে Modifier.fillMaxColumnWidth() বা Modifier.fillMaxRowHeight() প্রয়োগ করা নিশ্চিত করে যে একই কলাম বা সারির আইটেমগুলি কলাম/সারির বৃহত্তম আইটেমের মতো একই প্রস্থ বা উচ্চতা গ্রহণ করে।

উদাহরণস্বরূপ, এই উদাহরণটি Android ডেজার্টের তালিকা প্রদর্শন করতে FlowColumn ব্যবহার করে। আপনি প্রতিটি আইটেমের প্রস্থের পার্থক্য দেখতে পাবেন যখন Modifier.fillMaxColumnWidth() আইটেমগুলিতে প্রয়োগ করা হয় বনাম যখন এটি না হয় এবং আইটেম মোড়ানো হয়।

FlowColumn(
    Modifier
        .padding(20.dp)
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    maxItemsInEachColumn = 5,
) {
    repeat(listDesserts.size) {
        Box(
            Modifier
                .fillMaxColumnWidth()
                .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp))
                .padding(8.dp)
        ) {

            Text(
                text = listDesserts[it],
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp)
            )
        }
    }
}FlowLayoutSnippets.kt

`Modifier.fillMaxColumnWidth()` প্রতিটি আইটেমে প্রয়োগ করা হয়েছে
কোন প্রস্থ পরিবর্তন সেট করা নেই (মোড়ানো আইটেম)