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

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

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

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

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

অলস লোডিং প্রবাহ আইটেম

ContextualFlowRow এবং ContextualFlowColumn হল FlowRow এবং FlowColumn এর একটি বিশেষ সংস্করণ যা আপনাকে আপনার ফ্লো সারি বা কলামের বিষয়বস্তু অলসভাবে লোড করতে দেয়৷ তারা আইটেমের অবস্থান (সূচী, সারি নম্বর এবং উপলব্ধ আকার) সম্পর্কে তথ্যও প্রদান করে, যেমন আইটেমটি প্রথম সারিতে থাকে। এটি বড় ডেটা-সেটের জন্য উপযোগী এবং যদি আপনার একটি আইটেম সম্পর্কে প্রাসঙ্গিক তথ্যের প্রয়োজন হয়।

maxLines প্যারামিটার প্রদর্শিত সারির সংখ্যা সীমিত করে, এবং overflow প্যারামিটার নির্দিষ্ট করে যে আইটেমগুলির ওভারফ্লো পৌঁছালে কী প্রদর্শিত হবে, আপনাকে একটি কাস্টম expandIndicator বা collapseIndicator নির্দিষ্ট করতে দেয়।

উদাহরণস্বরূপ, একটি "+ (বাকী আইটেমের সংখ্যা)" বা "কম দেখান" বোতাম দেখানোর জন্য:

val totalCount = 40
var maxLines by remember {
    mutableStateOf(2)
}

val moreOrCollapseIndicator = @Composable { scope: ContextualFlowRowOverflowScope ->
    val remainingItems = totalCount - scope.shownItemCount
    ChipItem(if (remainingItems == 0) "Less" else "+$remainingItems", onClick = {
        if (remainingItems == 0) {
            maxLines = 2
        } else {
            maxLines += 5
        }
    })
}
ContextualFlowRow(
    modifier = Modifier
        .safeDrawingPadding()
        .fillMaxWidth(1f)
        .padding(16.dp)
        .wrapContentHeight(align = Alignment.Top)
        .verticalScroll(rememberScrollState()),
    verticalArrangement = Arrangement.spacedBy(4.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    maxLines = maxLines,
    overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator(
        minRowsToShowCollapse = 4,
        expandIndicator = moreOrCollapseIndicator,
        collapseIndicator = moreOrCollapseIndicator
    ),
    itemCount = totalCount
) { index ->
    ChipItem("Item $index")
}
FlowLayoutSnippets.kt

আইটেম ওজন

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

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

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

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

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

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 :

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

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

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

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
) {
    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)
    )
}
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() প্রতিটি আইটেমে প্রয়োগ করা হয়েছে
কোন প্রস্থ পরিবর্তন সেট করা নেই (মোড়ানো আইটেম)