আইটেম আচরণ সেট করুন

একটি আইটেম কীভাবে আকার, ক্রম পরিবর্তন করে এবং FlexBox ভিতরে সারিবদ্ধ হয় তা নিয়ন্ত্রণ করতে Modifier.flex ব্যবহার করুন।

আইটেমের আকার

কোনও আইটেমের আকার নিয়ন্ত্রণ করতে basis, grow এবং shrink বৈশিষ্ট্য ব্যবহার করুন।

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis = FlexBasis.Auto
            grow = 1.0f
            shrink = 0.5f
        }
    )
}
FlexBoxSnippets.kt

প্রাথমিক আকার সেট করুন

অতিরিক্ত স্থান বিতরণের আগে আইটেমের প্রাথমিক আকার নির্দিষ্ট করার জন্য basis ব্যবহার করুন। আপনি এটিকে আইটেমের পছন্দের আকার হিসাবে ভাবতে পারেন।

মানের ধরণ	আচরণ	কোড স্নিপেট দ্রষ্টব্য: বাক্সগুলির সর্বোচ্চ অভ্যন্তরীণ আকার 100dp	কন্টেইনার প্রস্থ 600dp ব্যবহারের উদাহরণ
Auto (ডিফল্ট)	আইটেমের সর্বোচ্চ অভ্যন্তরীণ আকার ব্যবহার করুন। উদাহরণস্বরূপ, একটি Text কম্পোজেবলের সর্বাধিক অভ্যন্তরীণ প্রস্থ হল একটি একক লাইনে থাকা সমস্ত টেক্সটের প্রস্থ - কোনও মোড়ক ছাড়াই।	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
স্থির dp	ডিপিতে একটি নির্দিষ্ট আকার।	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
শতাংশ	পাত্রের আকারের একটি শতাংশ।	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

যদি ভিত্তি মান আইটেমের অভ্যন্তরীণ ন্যূনতম আকারের চেয়ে কম হয়, তাহলে অভ্যন্তরীণ ন্যূনতম আকার ব্যবহার করা হয়। উদাহরণস্বরূপ, যদি একটি Text আইটেম যাতে একটি শব্দ থাকে তার প্রদর্শনের জন্য 50dp প্রয়োজন হয়, কিন্তু basis = 10.dp ও থাকে, তাহলে 50dp মান ব্যবহার করা হয়।

জায়গা থাকলে জিনিসপত্র বাড়ান

অতিরিক্ত জায়গা থাকলে কোন জিনিস কতটা বাড়বে তা নির্দিষ্ট করতে grow ব্যবহার করুন। সমস্ত জিনিসের basis মান যোগ করার পরে FlexBox কন্টেইনারে এটি অবশিষ্ট জায়গা। grow মান নির্দেশ করে যে একটি শিশু তার ভাইবোনদের তুলনায় কতটা অতিরিক্ত জায়গা পাবে। ডিফল্টরূপে, জিনিসগুলি বাড়বে না।

নিচের উদাহরণে তিনটি চাইল্ড আইটেম সহ একটি FlexBox দেখানো হয়েছে। প্রতিটির ভিত্তি মান 100dp । প্রথম চাইল্ডের একটি ধনাত্মক grow মান রয়েছে। যেহেতু শুধুমাত্র একটি চাইল্ডের একটি grow মান রয়েছে, তাই প্রকৃত মানটি অপ্রাসঙ্গিক - যতক্ষণ এটি ধনাত্মক হয়, ততক্ষণ শিশুটি সমস্ত অতিরিক্ত স্থান পায়।

ছবিগুলি FlexBox এর আচরণ দেখায় যখন এর কন্টেইনারের আকার 600dp হয়।

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

প্রতিটি শিশুর ভিত্তি মান 100dp । অতিরিক্ত 300dp স্থান আছে। অতিরিক্ত জায়গা পূরণ করার জন্য শিশু ১ 300dp বৃদ্ধি পায়।

নিম্নলিখিত উদাহরণে, ধারক আকার এবং basis আকার একই। পার্থক্য হল প্রতিটি শিশুর grow মান আলাদা।

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow = 2f } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow = 3f } ) } FlexBoxSnippets.kt

প্রতিটি শিশুর ভিত্তি মান 100dp । অতিরিক্ত 300dp স্থান আছে। মোট বৃদ্ধির মান ৬। শিশু ১ (১ / ৬) * ৩০০ = 50dp বৃদ্ধি পায় শিশু ২ (২ / ৬) * ৩০০ = 100dp বৃদ্ধি পায় শিশু ৩ (৩ / ৬) * ৩০০ = 150dp বৃদ্ধি পায়

পর্যাপ্ত জায়গা না থাকলে জিনিসপত্র সঙ্কুচিত করুন

FlexBox কন্টেইনারে সমস্ত আইটেমের জন্য পর্যাপ্ত জায়গা না থাকলে একটি আইটেম কতটা সঙ্কুচিত হবে তা নির্দিষ্ট করতে shrink ব্যবহার করুন। shrink grow এর মতোই কাজ করে, তবে আইটেমগুলিতে অতিরিক্ত জায়গা বিতরণের পরিবর্তে, স্থান ঘাটতি আইটেমগুলিতে বিতরণ করা হয়। shrink মানটি নির্দিষ্ট করে যে আইটেমটি কতটা স্থান ঘাটতি পাবে, অথবা বরং, আইটেমটি কতটা সঙ্কুচিত হবে। ডিফল্টরূপে, আইটেমগুলির shrink মান 1f থাকে, যার অর্থ তারা সমানভাবে সঙ্কুচিত হয়।

নিচের উদাহরণে একই টেক্সট সহ দুটি Text কম্পোজেবল দেখানো হয়েছে। প্রথম চাইল্ডের শঙ্কু মান 1f , যার অর্থ এটি সমস্ত স্থান ঘাটতি শোষণ করার জন্য সঙ্কুচিত হয়।

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink = 1f }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink = 0f }
    )
}
FlexBoxSnippets.kt

পাত্রের আকার সঙ্কুচিত হওয়ার সাথে সাথে শিশু ১ সঙ্কুচিত হয়।

পাত্রের আকার	ফ্লেক্সবক্স ইউআই
700dp
500dp
450dp

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

কোনও আইটেম ক্রস অক্ষের সাথে কীভাবে সারিবদ্ধ হবে তা নিয়ন্ত্রণ করতে alignSelf ব্যবহার করুন। এটি এই আইটেমের জন্য কন্টেইনারের alignItems বৈশিষ্ট্যকে ওভাররাইড করে। এতে সমস্ত সম্ভাব্য মান একই রকম রয়েছে, Auto যোগ করার সাথে সাথে যা FlexBox কন্টেইনারের আচরণ উত্তরাধিকারসূত্রে পায়।

উদাহরণস্বরূপ, এই FlexBox alignItems কে Start এ সেট করা আছে এবং পাঁচটি শিশু আছে যা ক্রস অক্ষের সারিবদ্ধতাকে ওভাররাইড করে।

FlexBox(
    config = {
        alignItems = FlexAlignItems.Start
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Center })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.End })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Stretch })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Baseline })
}
FlexBoxSnippets.kt

আইটেম অর্ডার

ডিফল্টরূপে, FlexBox কোডে ঘোষিত ক্রমানুসারে আইটেমগুলিকে সাজায়। order ব্যবহার করে এই আচরণটি ওভাররাইড করুন।

order ডিফল্ট মান শূন্য, এবং FlexBox এই মানের উপর ভিত্তি করে আইটেমগুলিকে ঊর্ধ্বমুখী ক্রমে সাজায়। একই order মানযুক্ত যেকোনো আইটেমকে একই ক্রমে সাজানো হয় যেখানে তারা ঘোষিত হয়। ঋণাত্মক এবং ধনাত্মক order মান ব্যবহার করে আইটেমগুলিকে লেআউটের শুরু বা শেষে সরানো হয় যেখানে তারা ঘোষণা করা হয়েছে তা পরিবর্তন না করে।

নিচের উদাহরণে দুটি শিশু আইটেম দেখানো হয়েছে। প্রথমটির ডিফল্ট order শূন্য এবং দ্বিতীয়টির ক্রম -1 । সাজানোর পরে, শিশু 1 শিশু 2 এর পরে প্রদর্শিত হবে।

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order = -1
        }
    )
}
FlexBoxSnippets.kt